angular中filter查询与ng-repeat

最新推荐文章于 2021-03-13 04:00:31 发布

阳光_微风_一切刚刚好

最新推荐文章于 2021-03-13 04:00:31 发布

阅读量1.3k

点赞数 1

本文链接：https://blog.csdn.net/m0_38044521/article/details/78048439

版权

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