<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> table{ border: 1px solid #000; border-collapse: collapse; margin: 10px; text-align: center; } tr,td{ border: 1px solid #000; border-collapse: collapse; padding: 10px; } </style> <script src="../../script/angular.min.js"></script> <script> var myapp=angular.module("myapp",[]); myapp.controller("myctrl",function ($scope) { var items=[ {"id":124,"name":"zhang","pass":456,"age":13,"sex":"女"}, {"id":144,"name":"zhangfei","pass":956,"age":23,"sex":"男"}, {"id":134,"name":"zhangcvs","pass":476,"age":33,"sex":"男"}, {"id":224,"name":"zhangsdf","pass":466,"age":18,"sex":"女"} ]; $scope.items=items; $scope.show=false; $scope.unshow=false; $scope.add=function () { $scope.show=true; $scope.unshow=false; }; $scope.action=function () { items.push({ "id": $scope.myid, "name": $scope.myname, "pass": $scope.mypass, "age": $scope.myage, "sex": $scope.mysex }); }; $scope.allcheck=function () { var arr=[]; var is=confirm("确定全部删除?"); if(is==true) { for (var i = 0; i < items.length; i++) { items[i] = ""; } } } $scope.update=function (item) { console.log(item); $scope.unshow=true; $scope.show=false; $scope.but=function () { for(var i=0;i<items.length;i++){ if(items[i].id==item.id&&$scope.newpass==$scope.surepass&&$scope.oldpass==items[i].pass){ items[i].pass=$scope.newpass; break; }else { confirm("密码错误,请核对信息"); break; } } } } }); </script> </head> <body ng-app="myapp" ng-controller="myctrl"> <input type="text" ng-model="na"/><input type="text" ng-model="ag"/> 性别:<select ng-model="se"> <option>女</option> <option>男</option> </select> <button ng-click="allcheck()">全部删除</button> <table> <tr> <td>id</td> <td>用户名</td> <td>密码</td> <td>年龄</td> <td>性别</td> <td>操作</td> </tr> <tr ng-repeat="item in items | filter:{'name':na} | filter:{'age':ag} | filter:{'sex':se}"> <td>{{item.id}}</td> <td>{{item.name}}</td> <td>{{item.pass}}</td> <td>{{item.age}}</td> <td>{{item.sex}}</td> <td><button ng-click="update(item)">修改密码</button></td> </tr> </table> <button ng-click="add()">添加用户</button> <div ng-show="show"> id:<input type="text" ng-model="myid"/><br> 用户名:<input type="text" ng-model="myname"/><br> 密码:<input type="text" ng-model="mypass"/><br> 年龄:<input type="text" ng-model="myage"/><br> 性别:<input type="text" ng-model="mysex"/><br> <button ng-click="action()">提交</button> </div> <div ng-show="unshow"> 旧密码:<input type="text" ng-model="oldpass"/><br> 新密码:<input type="text" ng-model="newpass"/><br> 确认密码:<input type="text" ng-model="surepass"/><br> <button ng-click="but()">提交</button> </div> </body> </html>
今天分享的是一个在表格中修改以及分列模糊查询的东西,能帮助初学者更快的了解angluar中的传值和管道符如何使用
最新推荐文章于 2022-10-19 15:43:10 发布