AngularJs implementiert den Abfragefunktionscode zum Hinzufügen, Löschen und Ändern von Tabellen-js-Tutorial-php.cn

AngularJs implementiert den Abfragefunktionscode zum Hinzufügen, Löschen und Ändern von Tabellen

小云云

Freigeben： 2018-03-01 09:36:17

Original

1769 Leute haben es durchsucht

Dieser Artikel teilt Ihnen hauptsächlich die Implementierung von Abfragefunktionscodes zum Hinzufügen, Löschen und Ändern von Tabellen mit. Ich hoffe, er kann Ihnen helfen.

sieht so aus:

<!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>

Nach dem Login kopieren

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;
}

Nach dem Login kopieren

Verwandte Empfehlungen:

js einfache Tabelle zum Hinzufügen von Zeilen und Löschen von Zeilenoperationen example_javascript skills

Das obige ist der detaillierte Inhalt vonAngularJs implementiert den Abfragefunktionscode zum Hinzufügen, Löschen und Ändern von Tabellen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!