How to add, delete, modify query methods through tables in angularJs-JS Tutorial-php.cn

How to add, delete, modify query methods through tables in angularJs

亚连

Release： 2018-06-04 10:48:55

Original

1616 people have browsed it

Below I will share with you an angularJs table addition, deletion and modification query method. It has a good reference value and I hope it will be helpful to everyone.

looks like this:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <script src="agl/angular.min.js"></script>
 <script>
  var app=angular.module("mpp",[]);
  app.controller("ctrl",function ($scope) {
   $scope.arr=[];
   $scope.add=function () {
    $scope.arr.push({name:$scope.name,password:$scope.password,age:$scope.age,sex:$scope.sex})
   }
   $scope.submit=function () {
    for (var i=0;i<$scope.arr.length;i++)
    {
     if($scope.arr[i].name==$scope.name2)
     {
     if($scope.arr[i].password==$scope.pass)
     {
      if($scope.pass2==$scope.pass){
       $scope.arr[i].password=$scope.pass2;
      }else{
       alert("两次输入不一致");
      }
     }else {
      alert("密码错误");
     }
     }else {
      alert("用户名错误");
     }
    }
   }
   $scope.flag=false;
   $scope.show=function () {
    $scope.flag=true;
   }
  })
 </script>
 <link rel="stylesheet" href="css/style.css" rel="external nofollow" >
</head>
<body ng-app="mpp" ng-controller="ctrl">
<p class="inner">
 <input type="text" placeholder="用户名查询" ng-model="user">
 <input type="text" placeholder="年龄范围查询" ng-model="ages">
 <select ng-model="sexs">
  <option value="男">男</option>
  <option value="女">女</option></select>
 <button>全部删除</button>
 <TABLE>
  <tr>
   <th>Id</th>
   <th>用户名</th>
   <th>密码</th>
   <th>年龄</th>
   <th>性别</th>
   <th>操作</th>
  </tr>
  <tr ng-repeat="item in arr|filter:{name:user}|filter:{age:ages}|filter:{sex:sexs}">
   <td>{{$index+1}}</td>
   <td>{{item.name}}</td>
   <td>{{item.password}}</td>
   <td>{{item.age}}</td>
   <td>{{item.sex}}</td>
   <td><button ng-click="show()">修改密码</button></td>
  </tr>
 </TABLE>
 <button ng-click="add()">添加用户</button>
 <p class="conner">
 <p class="add">
  用户名：<input type="text" ng-model="name"><br>
  密 码：<input type="password" ng-model="password"><br>
  年 龄：<input type="text" ng-model="age"><br>
  性 别：<select ng-model="sex">
  <option value="男">男</option>
  <option value="女">女</option></select><br>
 </p>
 <p class="update" ng-show="flag">
  用户名：<input type="text" ng-model="name2"><br>
  旧密码：<input type="text" ng-model="pass"><br>
  新密码：<input type="password" ng-model="pass2"><br>
  确认密码：<input type="password" ng-model="pass3"><br>
 </p>
 </p>
 <button ng-click="submit()">提交</button>
</p>
</body>
</html>

Copy after login

css

*{

 margin: 0;
 padding: 0;
}
.inner{
 margin: 20px auto;
 text-align: center;
}
table{
 margin: 10px auto;
 text-align: center;
}
tr{
 border-collapse: collapse;
}
tr th,td{
 border:1px solid #000000;
 width: 60px;
}
.conner{
 width: 600px;
 height: 300px;
 background: #ffe7e0;
 margin: 0 auto;
}
.add{
 margin: 10px auto;
 padding-top: 20px;
 width: 260px;
 height: 120px;
 border: 2px solid #e42112;
}
.update{
 width: 280px;
 height: 120px;
 border: 2px solid #e42112;
 text-align: center;
 margin: 10px auto;
 padding-top: 20px;
}

Copy after login

above I compiled it for everyone. I hope it will be helpful to everyone in the future.

How to download images in node.js

How to use eventBus in vue to implement sibling components Communication

How to implement a custom pie chart (Echarts) component in vue2.0

The above is the detailed content of How to add, delete, modify query methods through tables in angularJs. For more information, please follow other related articles on the PHP Chinese website!