angular中filter查询与ng-repeat

来源：互联网发布：msoffice2016 for mac 编辑：程序博客网时间：2024/06/13 10:18
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta author="Dabin" title="angular查询与修改">    <title>Title</title>    <style>        th, td {            padding: 10px;            text-align: center;        }    </style>    <script src="../angular-1.5.5/angular.min.js"></script>    <script>        angular.module("myapp", [])            .controller("myCtrl", function ($scope) {                $scope.arr = [{                    id: "1", name: "a", pass: 111, age: 20, sex: "男"                }, {                    id: "2", name: "b", pass: 222, age: 21, sex: "女"                }, {                    id: "3", name: "c", pass: 333, age: 22, sex: "男"                }]                //删除                $scope.allDelete = function () {                    $scope.arr = [];                }                //点击修改密码 显示修改密码的框                $scope.revamp = function () {                    $scope.reveal = true;                }                //提交                $scope.submin = function () {                    for (var i = 0; i < $scope.arr.length; i++) {                        if ($scope.arr[i].name == $scope.newName) {                            if ($scope.pastPass == $scope.arr[i].pass) {                                if ($scope.newPass == $scope.againPass) {                                    $scope.arr[i].name = $scope.newName;                                    $scope.arr[i].pass = $scope.newPass;                                    //修改成功后,隐藏修改密码的框                                    $scope.reveal = false;                                    return                                } else {                                    alert("两次密码不一致");                                    return                                }                            } else {                                alert("原密码不对");                                return                            }                        }                    }                    alert("没有改用户");                }            })    </script></head><body ng-app="myapp" , ng-controller="myCtrl"><input type="text" placeholder="用户名查询" ng-model="findName"><input type="text" placeholder="年龄范围查询" ng-model="findAge"><select>    <option>性别:</option>    <option>男</option>    <option>女</option></select><button ng-click="allDelete()">全部删除</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':findName}|filter:{'age':findAge}">        <td>{{item.id}}</td>        <td>{{item.name}}</td>        <td>{{item.pass}}</td>        <td>{{item.age}}</td>        <td>{{item.sex}}</td>        <td>            <button ng-click="revamp()">修改密码</button>        </td>    </tr></table><!--修改密码--><div ng-show="reveal">    用户名: <input type="text" ng-model="newName"><br>    旧密码: <input type="text" ng-model="pastPass"><br>    新密码: <input type="text" ng-model="newPass"><br>    确定密码: <input type="text" ng-model="againPass"><br>    <button ng-click="submin()">提交</button></div></body></html>
阅读全文
1 0