angularJS实现增删改查等_angular增删改查集合的方法-优快云博客

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>weicy</title>
    <script src="angular.js"></script>
    <script>
        var app = angular.module("myApp",[]);
        app.controller("myCtrl",function ($scope) {
            $scope.arr=[];
            $scope.users = [{
                id:1,
                name:"张三",
                pwd:"123",
                age:22,
                sex:"男",
                state:false
            },{
                id:2,
                name:"李四",
                pwd:"456",
                age:33,
                sex:"女",
                state:false
            },{
                id:3,
                name:"王五",
                pwd:"789",
                age:44,
                sex:"男",
                state:false
            }];
            //批量删除
            $scope.deleteSel = function(){

                for(var i=0;i<$scope.users.length;i++){
                    if($scope.users[i].state==true){
                        $scope.users.splice(i,1);
                        i--;
                    }
                }
            }

            //全选方法
            $scope.selectAll=false;
            $scope.selectAllFun= function () {
                for(var i=0;i<$scope.users.length;i++){
                    if($scope.selectAll===true){
                        $scope.users[i].state=true;
                    }else {
                        $scope.users[i].state=false;
                    }
                }
            };
            //如果选项全部现在 全选按键自动为true
            $scope.checkSelect = function () {
                var flag = 0;
                for(var i = 0; i<$scope.users.length; i++){
                    if($scope.users[i].state == true){
                        flag ++;
                    }
                }
                if(flag == $scope.users.length){
                    $scope.selectAll = true;
                }else{
                    $scope.selectAll = false;
                }
            };
            //性别区间选择
            $scope.size = "--请选择--";
            $scope.ageSize = function(age,size){

                if(size == "--请选择--"){
                    return true;
                }else{
                    var arr = size.split("-");
                    var ageMin = arr[0];
                    var ageMax = arr[1];
                    if(age>ageMin && age<ageMax){
                        return true;
                    }else{
                        return false;
                    }
                }
            }
            //男女区间选择
            $scope.size1 = "--请选择--";
            $scope.sexSize = function(sex,size1){

                if(size1 == "--请选择--"){
                    return true;
                }else{

                    if($scope.size1==sex){
                        return true;
                    }else{
                        return false;
                    }
                }
            }
            //全部删除
            $scope.deleteAll = function(){
                $scope.users = null;
            }
            //添加用户显示隐藏
            $scope.toggle = function() {
                $scope.myVar = !$scope.myVar;
            }
            //修改密码显示隐藏
            $scope.xgmm = function($index,name,pwd) {
                    $scope.myVar1 = !$scope.myVar1;
                    $scope.name = name;
                    $scope.tijiao = function (xgjmm,xgxmm,xgqr) {
                        if (pwd!=xgjmm){
                            alert("旧密码不正确")
                        }else {
                            if (xgxmm != xgqr){
                               alert("两次密码不一致")
                            }else {
                                for(index in $scope.users){
                                    if($scope.users[index].name == name){
                                        //获得用户输入的密码，赋值给当前用户要修改的新密码。

                                        $scope.users[index].pwd = xgxmm;
                                    }
                                }
                            }

                        }
                    }

            }
            //添加用户
            $scope.zhuce = function (id,yhm,mm,nl,xb) {
                if (id==""||id==null && yhm==""||yhm==null && mm==""||mm==null && nl==""||nl==null && xb==""||xb==null){
                    alert("不能为空")
                }else {
                    if (nl>10 && nl<60){
                        $scope.users.push({
                            id:id,
                            name:yhm,
                            pwd:mm,
                            age:nl,
                            sex:xb,
                            state:false
                        });
                    }else {
                        alert("年龄在10到60之间")
                    }

                }

            }

        })
    </script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
    <center>
        <input type="text" placeholder="用户名查询" ng-model="yhm">&nbsp;
        年龄：<select  ng-model="size">
                 <option>--请选择--</option>
                 <option>11-20</option>
                 <option>21-30</option>
                 <option>31-40</option>
                 <option>41-50</option>
                 <option>51-60</option>
             </select>&nbsp;
        性别：<select ng-model="size1">
                 <option>--请选择--</option>
                 <option>男</option>
                 <option>女</option>

             </select>&nbsp;
        <button ng-click="deleteAll()">全部删除</button>&nbsp;<button  ng-click="deleteSel()">批量删除</button>
        <br><br>
        <table border="1 solid blue" cellpadding="10" cellspacing="0">
            <tr>
                <th><input type="checkbox"  ng-model="selectAll" ng-click="selectAllFun()"></th>
                <th>i   d</th>
                <th>用户名</th>
                <th>密  码</th>
                <th>年  龄</th>
                <th>性  别</th>
                <th>操  作</th>
            </tr>
            <tr ng-repeat="user in users | filter:{name:yhm}  " ng-if="ageSize(user.age,size)" ng-show="sexSize(user.sex,size1)">
                <td><input type="checkbox"  ng-model="user.state"  ng-click="checkSelect($index)" /></td>
                <td>{{user.id}}</td>
                <td>{{user.name}}</td>
                <td>{{user.pwd}}</td>
                <td>{{user.age}}</td>
                <td>{{user.sex}}</td>
                <td><button  ng-click="xgmm($index,user.name,user.pwd)">修改密码</button></td>
            </tr>

        </table>
        <br><br>


        <button ng-click="toggle()">添加用户</button>
        <table ng-if="myVar"  border="1 solid blue" cellpadding="10" cellspacing="0">
            <tr>
                <th>i   d</th>
                <td><input type="text" ng-model="id"></td>
            </tr>
            <tr>
                <th>用户名</th>
                <td><input type="text" ng-model="yhm"></td>
            </tr>
            <tr>
                <th>密  码</th>
                <td><input type="password" ng-model="mm"></td>
            </tr>
            <tr>
                <th>年  龄</th>
                <td><input type="text" ng-model="nl"></td>
            </tr>
            <tr>
                <th>性  别</th>
                <td><input type="text" ng-model="xb"></td>
            </tr>
            <tr  align="center">

                <td colspan="2" ><button ng-click="zhuce(id,yhm,mm,nl,xb)">注册</button></td>
            </tr>

        </table>
        <br><br>

        <table ng-if="myVar1"  border="1 solid blue" cellpadding="10" cellspacing="0">
            <tr>
                <th>用户名</th>
                <td><input type="text" disabled="disabled" ng-model="name" placeholder="请输入用户名"></td>
            </tr>
            <tr>
                <th>旧密码</th>
                <td><input type="text" ng-model="xgjmm"></td>
            </tr>
            <tr>
                <th>新密码</th>
                <td><input type="password" ng-model="xgxmm"></td>
            </tr>
            <tr>
                <th>确认</th>
                <td><input type="password" ng-model="xgqr"></td>
            </tr>

            <tr  align="center">

                <td colspan="2" ><button ng-click="tijiao(xgjmm,xgxmm,xgqr)">提交</button></td>
            </tr>

        </table>

    </center>
</div>
</body>
</html>