查询添加用户

来源：互联网发布：淘宝标题优化技巧步骤编辑：程序博客网时间：2024/05/17 06:53

<title></title>
<script type="text/javascript" src="../js/angular.js" ></script>
<script type="text/javascript" src="../js/jquery-2.1.1.js" ></script>

<style type="text/css">
.xs{
cursor: pointer;
}2
.first{
background-color:darkgrey;
}
tbody tr:nth-child(odd){
background-color:lightgrey;
}
tbody tr:nth-child(even){
background-color:azure;
}
table tr:hover{background-color:darkturquoise;
</style>
<script>
var app = angular.module("myApp",[]);
app.controller("myCtrl",function($scope){

$(function () {
$("thead tr").addClass("first");
});

$(function(){
$("button").addClass("xs");
})

$scope.position = [{
name:"张三",
age:45,
pinyin:"zhang san",
zhiwei:"总经理"
},{
name:"李四",
age:43,
pinyin:"li si",
zhiwei:"设计师"
},{
name:"王五",
age:40,
pinyin:"wang wu",
zhiwei:"工程师"
},{
name:"赵六",
age:33,
pinyin:"zhao liu",
zhiwei:"工程师"
},{
name:"周七",
age:32,
pinyin:"zhou qi",
zhiwei:"人事经理"
}];

//过滤姓名
$scope.name = "";
$scope.flag = "";
$scope.flag2 = false;
$scope.filName = function(){
if($scope.name.indexOf("法轮功")>=0){
alert("不能包含敏感字符");
return false;
//$scope.flag = "";
}
if($scope.name == ""){
alert("请输入姓名");
$scope.flag = "";
}else{
for(index in $scope.position){
if($scope.name == $scope.position[index].name){
$scope.flag = $scope.name;
$scope.flag2 = true;
}else{

}
}
}

if(!$scope.flag2){
alert("没有找到匹配项");
}
}

//确定用户提交页面显示隐藏
$scope.isShow = false;
$scope.show = function(){
if($scope.isShow){
$scope.isShow = false;
}else{
$scope.isShow = true;
}
}

//验证age--->angular形式
$scope.newAge = "";
$scope.newName = "";
$scope.newPinyin = "";
$scope.newPos = "";
$scope.checkAge = function(){
if($scope.newAge == "" || $scope.newAge == null){
alert("年龄不能为空");
}else if(isNaN($scope.newAge)){
alert("年龄格式不正确");
}else if($scope.newAge<0 || $scope.newAge>150){
alert("输入的不是人的年龄");
}else{
var peo = {
name:$scope.newName,
age:$scope.newAge,
pinyin:$scope.newPinyin,
zhiwei:$scope.newPos
};
$scope.position.push(peo);
}
}

//点击删除按钮, 删除当前商品
$scope.delProduct = function(delName){
for(index in $scope.position){
if (delName == $scope.position[index].name){
if(confirm("确定删除吗?") == true){
$scope.position.splice(index,1);
}else{
return false;
}
} else{
return false;
}
}
}

});
</script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<center>
<h3>用户列表</h3>
用户名查询：<input type="text" ng-model="name"/>
<select ng-model="ageOrder">
<option value="">--请选择--</option>
<option value="age">年龄正序</option>
<option value="-age">年龄倒序</option>
</select><br />
用户列表<br />
<table border="1px solid blue" cellpadding="10" cellspacing="0">
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>拼音</th>
<th>职位</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="pos in position | filter:flag | orderBy:ageOrder">
<td>{{pos.name}}</td>
<td>{{pos.age}}</td>
<td>{{pos.pinyin}}</td>
<td>{{pos.zhiwei}}</td>
<td><button ng-click="delProduct(pos.name)">删除</button></td>
</tr>
</tbody>
</table><br />
<button ng-click="filName()">查询</button>
<button ng-click="show()">添加用户</button><br /><br />
<div ng-show="isShow">
<h3>添加用户</h3>
用户名：<input type="text" placeholder="请输入用户名" ng-model="newName"/><br /><br />
拼　音：<input type="text" placeholder="请输入拼音" ng-model="newPinyin"/><br /><br />
年　龄：<input type="text" placeholder="请输入年龄" ng-model="newAge"/><br /><br />
职　位：<input type="text" placeholder="请输入职位" ng-model="newPos"/><br /><br />
<input type="button" ng-click="checkAge()" value="提交" />
</div>
</center>
</body>

阅读全文

0 0