var myapp = angular.module("myapp",[]);
myapp.controller("myCtrl",function ($scope) {
$scope.isShowAddUser = false;
$scope.changedName = "";
$scope.changedOldPass = "";
$scope.changedNewPass = "";
$scope.changedCheckPass = "";
$scope.isShowChangePass = false;
$scope.searchName = "";
$scope.searchAge = "";
$scope.searchSex = "";
$scope.addId = "";
$scope.addName = "";
$scope.addPass = "";
$scope.addAge = "";
$scope.addSex = "";
$scope.items = [
{
id:1,
name:"a",
pass:111,
age:20,
sex:"男"
},
{
id:2,
name:"b",
pass:222,
age:21,
sex:"女"
},
{
id:3,
name:"c",
pass:333,
age:22,
sex:"男"
}
];
$scope.showChangePass = function () {
$scope.isShowChangePass = true;
};
$scope.submitChangePass = function () {
var isHave = false;
var success = false;
for (var i = 0; i < $scope.items.length; i++){
if ($scope.items[i].name == $scope.changedName){
isHave = true;
if ($scope.items[i].pass == $scope.changedOldPass){
if( $scope.changedNewPass == $scope.changedCheckPass ){
$scope.items[i].pass = $scope.changedNewPass;
success = true;
alert("修改成功");
}else{
alert("两次密码不一致");
}
}else{
alert("原始密码不正确");
}
}
}
if (!isHave){
alert("该用户名不存在");
}
if (success){
$scope.isShowChangePass = false;
}
};
$scope.addUer = function () {
$scope.isShowAddUser = true;
};
$scope.completeAdd = function () {
$scope.items.push({id:$scope.addId,name:$scope.addName,pass:$scope.addPass,age:$scope.addAge,sex:$scope.addSex});
$scope.isShowAddUser = false;
};
$scope.deleteAll = function () {
var b = confirm("确定要全部删除嘛?");
if (b){
$scope.items = [];
}
}
});
<input type="text" placeholder="用户名查询" ng-model="searchName">
<input type="text" placeholder="年龄范围查询" ng-model="searchAge">
<select ng-model="searchSex">
<option></option>
<option value="男">男</option>
<option value="女">女</option>
</select>
<button ng-click="deleteAll()">全部删除</button>
<table>
<thead>
<tr>
<th>id</th>
<th>用户名</th>
<th>密码</th>
<th>年龄</th>
<th>性别</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in items | filter:{'name':searchName} | filter:{age:searchAge} | filter:{sex:searchSex}">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.pass}}</td>
<td>{{item.age}}</td>
<td>{{item.sex}}</td>
<td><button ng-click="showChangePass()">修改密码</button></td>
</tr>
</tbody>
</table>
<button ng-click="addUer()">添加用户</button>
<div ng-show="isShowChangePass">
用户名:<input type="text" ng-model="changedName"><br>
旧密码:<input type="text" ng-model="changedOldPass"><br>
新密码:<input type="text" ng-model="changedNewPass"><br>
确认密码:<input type="text" ng-model="changedCheckPass"><br>
<button ng-click = "submitChangePass()">提交</button>
</div>
<div ng-show="isShowAddUser">
<input type="text" placeholder="id" ng-model="addId">
<input type="text" placeholder="用户名" ng-model="addName">
<input type="text" placeholder="密码" ng-model="addPass">
<input type="text" placeholder="年龄" ng-model="addAge">
<select ng-model="addSex">
<option value="男">男</option>
<option value="女">女</option>
</select>
<button ng-click="completeAdd()">添加</button>
</div>