Home > Article > Web Front-end > Angular js implements comprehensive operation methods such as adding users
Angular js implements comprehensive operation methods such as adding users
- 小云云Original
- 2018-01-03 13:11:571204browse
This article mainly introduces the comprehensive operation method of adding users, changing passwords, sensitive words, and drop-down menus in Angular js. Friends in need can refer to it. I hope it can help everyone.
In the last article, the editor introduced you to the implementation code of AngularJS fuzzy query function (filtering content drop-down menu, sorting, filtering sensitive characters, adding table information after verification and judgment). Today I will introduce to you Angular js to implement adding users and modifying The comprehensive operation methods of passwords, sensitive words, and drop-down menus are as follows:
Without further ado, I will just post the code for you. The specific code is as follows:
<!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>
Related recommendations:
Detailed explanation of Mysql adding users and authorization operations
How to use PHP to add users to windows_PHP tutorial
How to use Angularjs to change password example code sharing
The above is the detailed content of Angular js implements comprehensive operation methods such as adding users. For more information, please follow other related articles on the PHP Chinese website!
Related articles
See more- An in-depth analysis of the Bootstrap list group component
- Detailed explanation of JavaScript function currying
- Complete example of JS password generation and strength detection (with demo source code download)
- Angularjs integrates WeChat UI (weui)
- How to quickly switch between Traditional Chinese and Simplified Chinese with JavaScript and the trick for websites to support switching between Simplified and Traditional Chinese_javascript skills