This time I will bring you how to operate users with Angular js. What are the precautions for operating users with Angular js? The following is a practical case, let’s take a look.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
table{
border-collapse: collapse;
}
th,td{
padding: 10px;
border: 1px solid #000000;
}
</style>
<script src="../angular-1.5.5/angular.min.js"></script>
<script>
var myapp = angular.module("myapp",[]);
myapp.controller("myCtrl",function ($scope) {
$scope.data = [{
"id":1,
"name":"张三",
"pwd":"123",
"age":22,
"sex":"男",
"check":false
},
{
"id":2,
"name":"李四",
"pwd":"456",
"age":33,
"sex":"男",
"check":false
},
{
"id":3,
"name":"王五",
"pwd":"789",
"age":44,
"sex":"女",
"check":false
}];
$scope.show = false;
//添加用户
$scope.add = function () {
$scope.show = true;
}
//添加
$scope.submit = function () {
if($scope.name==""){
alert("请输入姓名")
}else if($scope.correct==true){
//进行修改的操作
$scope.data[$scope.index].pwd = $scope.pwd;
}else{
//添加的操作
$scope.data.push({"name":$scope.name,"pwd":$scope.pwd,"age":$scope.age,"sex":$scope.sex});
$scope.show = false;
}
}
//用户名查询。不能含有敏感字
$scope.search = "";
$scope.search2 ="";
//监听输入框的内容
$scope.$watch("search",function (value) {
if(value.indexOf("我")!=-1){
alert("含有敏感字");
$scope.search = "";
}else{
$scope.search2 = $scope.search;
}
});
//年龄筛选
$scope.opt = "请选择";
$scope.ageFilter = function (item) {
if($scope.opt!="请选择"){
var opt = $scope.opt;
var ageArr = opt.split("-");
var max = ageArr[1];
var min = ageArr[0];
var age = item.age;
if(age<min||age>max){
return false;
}else{
return true;
}
}else{
return true;
}
};
//性别筛选
$scope.sexthis = "请选择";
$scope.sexFun = function (item) {
if($scope.sexthis!="请选择"){
//如果性别==男||性别==女
if(item.sex==$scope.sexthis)
{
return true;
}else{
return false;
}
}else{
return true;
}
}
//全选
$scope.checkAll = false;
$scope.checkWhat = function () {
if ($scope.checkAll == true) {
for (var i = 0; i < $scope.data.length; i++) {
$scope.data[i].check = true;
}
} else {
for (var i = 0; i < $scope.data.length; i++) {
$scope.data[i].check = false;
}
}
};
//反选
var n = 0;
$scope.checkIt =function (index) {
console.log(index)
if($scope.data[index].check==true){
n++;
}else{
n--;
}
if(n==$scope.data.length){
$scope.checkAll=true;
}else{
$scope.checkAll = false;
}
};
//点击修改密码
$scope.correct = function (index) {
$scope.show = true;
$scope.name = $scope.data[index].name;
$scope.pwd = $scope.data[index].pwd;
//写入一个状态值
$scope.correct = true;
//记录索引
$scope.index = index;
}
//全部删除
$scope.delAll = function () {
$scope.data.length=0;
}
//批量删除
$scope.del = function () {
for(var i = 0;i<$scope.data.length;i++){
if($scope.data[i].check ==true){
$scope.data.splice(i,1);
i--;
}
}
}
})
</script>
</head>
<body ng-app="myapp" ng-controller="myCtrl">
<h2>用户信息表</h2>
<input type="text" placeholder="用户名查询" ng-model="search">
年龄<select ng-model="opt" ng-change="fun()">
<option>请选择</option>
<option>10-20</option>
<option>20-30</option>
<option>30-40</option>
</select>
性别<select ng-model="sexthis" ng-change="fun()">
<option>请选择</option>
<option>男</option>
<option>女</option>
</select>
<button ng-click="delAll()">全部删除</button>
<button ng-click="del()">批量删除</button>
<table>
<thead>
<tr>
<th><input type="checkbox" ng-model="checkAll" ng-click="checkWhat()"></th>
<th>id</th>
<th>用户名</th>
<th>密码</th>
<th>年龄</th>
<th>性别</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in data|filter:{name:search2}|filter:ageFilter|filter:sexFun">
<td><input type="checkbox" ng-model="item.check" ng-click="checkIt($index)"></td>
<td>{{$index}}</td>
<td>{{item.name}}</td>
<td>{{item.pwd}}</td>
<td>{{item.age}}</td>
<td>{{item.sex}}</td>
<td><button ng-click="correct($index)">修改密码</button></td>
</tr>
</tbody>
</table>
<button ng-click="add()">添加用户</button>
<ul ng-show="show">
<li>用户名<input type="text" placeholder="请输入用户名" ng-model="name"></li>
<li>密码<input type="text" placeholder="请输入密码" ng-model="pwd"></li>
<li>年龄<input type="text" placeholder="请输入年龄" ng-model="age"></li>
<li>性别<input type="text" placeholder="请输入性别" ng-model="sex"></li>
<li><button ng-click="submit()">提交</button></li>
</ul>
</body>
</html>React Native implements the address selector function
How to use mockjs to simulate back-end data
The above is the detailed content of How to operate users in Angular js. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
