AngularJs查询,添加,修改

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/angular.js"></script>
<style>
* {
margin: 0;
padding: 0;
}

table {
margin-top: 20px;
border-collapse: collapse;
}

td, th {
border: 1px solid #000;
padding: 20px;
text-align: center;
}

button {
border-radius: 5px;
border: 1px solid gainsboro;
background-color: orange;
color: white;
padding: 5px;
}

span {
width: 100px;
display: inline-block;
}

.age {
width: 20px;
height: 20px;
}
</style>
<script>
var myapp = angular.module("myapp", []);
myapp.controller("myCtrl", function ($scope) {
var data = [{"name": "a", "pass": 111, "age": 20, "sex": "男", "check": false},
{"name": "b", "pass": 222, "age": 21, "sex": "女", "check": false},
{"name": "c", "pass": 333, "age": 22, "sex": "男", "check": false}];
$scope.data = data;
//判断修改的界面是否出现
$scope.show = false;
//旧密码
$scope.usedPass;
//新密码
$scope.newPass;
//确认密码
$scope.renewPass;
//用来记录要删除的信息
var index = 0;
//修改密码的方法
$scope.updata = function (index) {
$scope.show = true;
模糊查询和修改密码 = 模糊查询和修改密码;

};
//提交修改的方法
$scope.submitUpdate = function () {
if ($scope.usedPass != null && $scope.newPass != null && $scope.renewPass != null) {
if ($scope.data[模糊查询和修改密码].pass == $scope.usedPass && $scope.newPass == $scope.renewPass) {
alert("提交成功");
$scope.data[模糊查询和修改密码].pass = $scope.newPass;
//成功后让修改界面消失
$scope.show = false;
$scope.usedPass = "";
$scope.newPass = "";
$scope.renewPass = "";
} else if ($scope.newPass != $scope.renewPass) {
alert("两次密码不一致，请重新检查");
} else {
alert("旧密码有误，请您确定后再输入");
}
}
};
//用来查询的字段
$scope.cxSearch;
$scope.cx = function (ziduan) {
console.log(ziduan);
console.log($scope.select);
$scope.cxSearch = ziduan;
}
//查询的方法
$scope.searchFifter = function (search) {
if ($scope.name != null || $scope.select != null || ($scope.startAge != null || $scope.endAge != null)) {
if ($scope.cxSearch == "name") {
if (search.name.indexOf($scope.name) != -1) {
return true;
} else {
return false;
}
} else if ($scope.cxSearch == "select") {
if (search.sex.indexOf($scope.select) != -1) {
return true;
} else {
return false;
}
} else if ($scope.cxSearch == "age") {
if ($scope.startAge < parseInt(search.age) && parseInt(search.age) < $scope.endAge || $scope.startAge == search.age || $scope.endAge == search.age) {
return true;
} else {
return false;
}
}
}
return true;
};
//删除全部的方法
$scope.delAll = function () {
if (confirm("确认删除")) {
$scope.data = [];
}
}
$scope.addshow = false;
//添加用户的方法
$scope.add = function () {
$scope.addshow = true;
}
$scope.submitAdd = function () {
if ($scope.addname == null || $scope.addpass == null || $scope.addage == null || $scope.addsex == null) {
alert("用户信息不可为空");
} else {
$scope.data.push({
"name": $scope.addname,
"pass": $scope.addpass,
"age": $scope.addage,
"sex": $scope.addsex,
"check": false
});
alert("提交成功");
$scope.addshow = false;
}

}
});
</script>
</head>
<body ng-app="myapp" ng-controller="myCtrl">
<center>
<input type="text" placeholder="用户名查询" ng-model="name" ng-click="cx('name')"/>
年龄范围查询:<input type="text" class="age" ng-model="startAge" ng-click="cx('age')">-<input type="text" class="age"
ng-model="endAge"
ng-click="cx('age')"/>
性别选项:<select ng-model="select" ng-click="cx('select')">
<option>男</option>
<option>女</option>
</select>
<button ng-click="delAll()">全部删除</button>
<table>
<thead>
<th>id</th>
<th>用户名</th>
<th>密码</th>
<th>年龄</th>
<th>性别</th>
<th>操作</th>
</thead>
<tbody>
<tr ng-repeat="item in data | filter:searchFifter:search">
<td>{{$index+1}}</td>
<td>{{item.name}}</td>
<td>{{item.pass}}</td>
<td>{{item.age}}</td>
<td>{{item.sex}}</td>
<td>
<button ng-click="updata($index)">修改密码</button>
</td>
</tr>
</tbody>
</table>
<button style="margin-top: 20px" ng-click="add()">添加用户</button>
<br>
<div ng-show="show">

<span>旧密码:</span><input type="password" ng-model="usedPass"> <br>
<span>新密码:</span><input type="password" ng-model="newPass"> <br>
<span>确认密码</span><input type="password" ng-model="renewPass"> <br>
<button style="margin-top: 20px" ng-click="submitUpdate()">提交</button>

</div>
<div ng-show="addshow">
<span>用户名:</span> <input type="text" ng-model="addname"><br>
<span>密码:</span><input type="password" ng-model="addpass"><br>
<span>年龄:</span><input type="text" ng-model="addage"><br>
<span>性别:</span><input type="text" ng-model="addsex"><br>
<button style="margin-top: 20px" ng-click="submitAdd()">提交</button>
</div>
</center>
</body>

</html>

AngularJs查询,添加,修改

AngularJs查询,添加,修改

相关推荐