angular 增删改查的另一方法

 var myapp = angular.module("myapp",[]);
        myapp.controller("myCtrl",function ($scope) {
            $scope.isShowAddUser = false;
            $scope.changedName = "";
            $scope.changedOldPass = "";
            $scope.changedNewPass = "";
            $scope.changedCheckPass = "";
            $scope.isShowChangePass = false;
            $scope.searchName = "";
            $scope.searchAge = "";
            $scope.searchSex = "";

            $scope.addId = "";
            $scope.addName = "";
            $scope.addPass = "";
            $scope.addAge = "";
            $scope.addSex = "";
            $scope.items = [
                {
                    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.showChangePass = function () {
                $scope.isShowChangePass = true;
            };
            $scope.submitChangePass = function () {
                var isHave = false;
                var success = false;
                for (var i = 0;  i < $scope.items.length; i++){
                    if ($scope.items[i].name == $scope.changedName){
                        isHave = true;
                        if ($scope.items[i].pass == $scope.changedOldPass){
                            if( $scope.changedNewPass == $scope.changedCheckPass ){
                                $scope.items[i].pass = $scope.changedNewPass;
                                success = true;
                                alert("修改成功");
                            }else{
                                alert("两次密码不一致");
                            }
                        }else{
                            alert("原始密码不正确");
                        }
                    }
                }
                if (!isHave){
                    alert("该用户名不存在");
                }
                if (success){
                    $scope.isShowChangePass = false;
                }

            };
            $scope.addUer = function () {
                $scope.isShowAddUser = true;
            };
            $scope.completeAdd = function () {
                $scope.items.push({id:$scope.addId,name:$scope.addName,pass:$scope.addPass,age:$scope.addAge,sex:$scope.addSex});
                $scope.isShowAddUser = false;
            };
            $scope.deleteAll = function () {
                var b = confirm("确定要全部删除嘛?");
                if (b){
                    $scope.items = [];
                }
            }
        });

<input type="text" placeholder="用户名查询" ng-model="searchName">
<input type="text" placeholder="年龄范围查询" ng-model="searchAge">
<select ng-model="searchSex">
    <option></option>
    <option value="男">男</option>
    <option value="女">女</option>
</select>
<button ng-click="deleteAll()">全部删除</button>
<table>
    <thead>
    <tr>
        <th>id</th>
        <th>用户名</th>
        <th>密码</th>
        <th>年龄</th>
        <th>性别</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody>
    <tr ng-repeat="item in items | filter:{'name':searchName} | filter:{age:searchAge} | filter:{sex:searchSex}">
        <td>{{item.id}}</td>
        <td>{{item.name}}</td>
        <td>{{item.pass}}</td>
        <td>{{item.age}}</td>
        <td>{{item.sex}}</td>
        <td><button ng-click="showChangePass()">修改密码</button></td>
    </tr>
    </tbody>
</table>
<button ng-click="addUer()">添加用户</button>
<div ng-show="isShowChangePass">
    用户名:<input type="text" ng-model="changedName"><br>
    旧密码:<input type="text" ng-model="changedOldPass"><br>
    新密码:<input type="text" ng-model="changedNewPass"><br>
    确认密码:<input type="text" ng-model="changedCheckPass"><br>
    <button ng-click = "submitChangePass()">提交</button>
</div>
<div ng-show="isShowAddUser">
    <input type="text" placeholder="id" ng-model="addId">
    <input type="text" placeholder="用户名" ng-model="addName">
    <input type="text" placeholder="密码" ng-model="addPass">
    <input type="text" placeholder="年龄" ng-model="addAge">
    <select ng-model="addSex">
        <option value="男">男</option>
        <option value="女">女</option>
    </select>
    <button ng-click="completeAdd()">添加</button>
</div>

posted on 2017-09-21 09:56  &&gy  阅读(319)  评论(0编辑  收藏  举报