Angular js 實(shí)現(xiàn)添加用戶、修改密碼、敏感字、下拉菜單的綜合操作方法

來源：懂視網(wǎng) 責(zé)編：小OO 時間：2020-11-27 22:27:02

Angular js 實(shí)現(xiàn)添加用戶、修改密碼、敏感字、下拉菜單的綜合操作方法

小編在上篇文章給大家介紹了AngularJS模糊查詢功能實(shí)現(xiàn)代碼(過濾內(nèi)容下拉菜單排序過濾敏感字符驗(yàn)證判斷后添加表格信息)，今天給大家介紹Angular js 實(shí)現(xiàn)添加用戶、修改密碼、敏感字、下拉菜單的綜合操作方法，具體內(nèi)容如下所示。廢話不多說了，直接給大家貼代碼了，具體代碼如下所示。

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀小編在上篇文章給大家介紹了AngularJS模糊查詢功能實(shí)現(xiàn)代碼(過濾內(nèi)容下拉菜單排序過濾敏感字符驗(yàn)證判斷后添加表格信息)，今天給大家介紹Angular js 實(shí)現(xiàn)添加用戶、修改密碼、敏感字、下拉菜單的綜合操作方法，具體內(nèi)容如下所示。廢話不多說了，直接給大家貼代碼了，具體代碼如下所示。

廢話不多說了，直接給大家貼代碼了，具體代碼如下所示：

<!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){
  //進(jìn)行修改的操作
  $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 ="";
 //監(jiān)聽輸入框的內(nèi)容
 $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;
 }
 };
 //點(diǎn)擊修改密碼
 $scope.correct = function (index) {
 $scope.show = true;
 $scope.name = $scope.data[index].name;
 $scope.pwd = $scope.data[index].pwd;
 //寫入一個狀態(tài)值
 $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>

總結(jié)

以上所述是小編給大家介紹的Angular js 實(shí)現(xiàn)添加用戶、修改密碼、敏感字、下拉菜單的綜合操作方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com