angularJS表格的增删改查

<!DOCTYPE html>
<html ng-app="myApp">
<head lang="en">
    <meta charset="UTF-8">
    <script type="text/javascript" src="angular-1.3.0.js"></script>
    <script type="text/javascript" src="jquery.1.12.4.js"></script>
    <title>用户</title>
    <script type="text/javascript">
        var app=angular.module("myApp",[]);
        app.controller("myCtrl",function($scope){
            $scope.data = [
                {
                    id: 1,
                    name: "aa",
                    password: "aa",
                    age: 10,
                    sex: "男",
                    state:false
                },
                {
                    id: 2,
                    name: "bb",
                    password: "bb",
                    age: 20,
                    sex: "男",
                    state:false
                },
                {
                    id: 3,
                    name: "cc",
                    password: "cc",
                    age: 30,
                    sex: "男",
                    state:false
                },
                {
                    id: 4,
                    name: "dd",
                    password: "dd",
                    age: 40,
                    sex: "男",
                    state:false
                }
            ]
            var id=5;
            //点击按钮添加
            $scope.add=function(){
                $scope.data.push({
                    id:id++,
                    name:$scope.name,
                    password: $scope.password,
                    age: $scope.age,
                    sex: $scope.sex,
                    state:false
                })
                $scope.name = "";
                $scope.password = "";
                $scope.age = "";
                $scope.sex = "";
                $scope.addUserIsShow = false;
            }
            $scope.addUser=function(){
                $scope.addUserIsShow=true;
            }

            //年龄范围的筛选
            $scope.ageFan = function(age,ageSize){
                var arr = ageSize.split("-");
                var min = arr[0];
                var max = arr[1];
                if(ageSize == "不限"){
                    return true;
                }else {
                    if (age > min && age < max) {
                        return true;
                    } else {
                        return false;
                    }
                }
            }

            //全部删除
            $scope.deleteAll = function () {
                for(i=0;i<$scope.data.length;i++){
                    $scope.data.splice(i,$scope.data.length);
                }
            }

            //批量删除
            $scope.deletePi = function(){
                var flag = true;
                //for遍历所有数据,判断状态是否为true,是true就证明选中了.
                      for(i = 0;i<$scope.data.length;i++){
                          //选中了就会执行删除splice方法,删除的时候下表会跟随变化,所以要i.
                          if($scope.data[i].state == true){
                              $scope.data.splice(i,1);
                              flag=false;
                              i--;
                          }
                      }
                //如果flag执行到这等于false那么就证明有选中的,如果等于true就证明没走if里面的方法
                if(flag){
                    alert("请勾选条目");
                }
            }
            //点击全选
            $scope.switchAll = function(){
                       for(i = 0;i<$scope.data.length;i++){
                           if($scope.che == true) {
                               $scope.data[i].state = true;
                           }else{
                               $scope.data[i].state = false;
                               }
                       }
                   }
            //点击user的时候id也跟着消失
            $scope.itemche= function () {
                var count=0;
                for(i = 0;i<$scope.data.length;i++){
                     if($scope.data[i].state==true){
                         count++;
                     }
                }
                if(count == $scope.data.length){
                    $scope.che=true;
                }else{
                    $scope.che=false;
                }
            }

            //每个条目后的修改按钮
            $scope.editUser = function (name,$index) {
                $scope.e_name = name;
            }
            //修改完成的提交按钮
            $scope.edit = function () {
               var isno =true;
                for(i=0;i<$scope.data.length;i++){
                   //判断旧密码与新密码是否相等
                    if($scope.data[i].password == $scope.e_old_password){
                  //判断两次输入的新密码是否一致
                        if($scope.e_password == $scope.e_repassword) {
                           //拿到你点击的用户名,修改当前用户名的密码
                            if ($scope.data[i].name == $scope.e_name) {
                             //将你的新密码赋值给当前对象(也就是覆盖旧密码)
                                $scope.data[i].password = $scope.e_password;
                            }
                        }
                        isno = false;
                    }
                }
                if(isno){
                    alert("旧密码不正确");
                }
            }
        });
        //复选框.each遍历
    /* $(function(){
            $("input[name='check_all']").click(function(){
                var ck=this.checked;
                $("input[name='users']").each(function(){
                    this.checked=ck;
                })
            })
     });*/

    </script>
</head>
<body ng-controller="myCtrl">
<input type="text" ng-model="guolv" placeholder="输入用户名">
年龄:<select ng-model="ageSize" ng-init="ageSize='不限'">
    <option>不限</option>
    <option>0-11</option>
    <option>12-21</option>
    <option>22-31</option>
    <option>32-41</option>
    <option>42-51</option>
    <option>52-61</option>
</select>
性别:
    <select ng-model="sexss">
        <option>男</option>
        <option>女</option>
    </select>
<button ng-click="deleteAll()">全部删除</button>
<button ng-click="deletePi()">批量删除</button>
    <table border="1px">
         <tr>
             <th>
                 <input type="checkbox" name="check_all" ng-click="switchAll()" ng-model="che">
             </th>
             <th>ID</th>
             <th>用户名</th>
             <th>密码</th>
             <th>年龄</th>
             <th>性别</th>
             <th>操作</th>
         </tr>
        <tr ng-repeat="user in data | filter:{name:guolv}|filter:{sex:sexss}" ng-if="ageFan(user.age,ageSize)">
            <td>
                <input type="checkbox" name="users" ng-model="user.state" ng-click="itemche()">
            </td>
            <td>{{user.id}}</td>
            <td>{{user.name}}</td>
            <td>{{user.password}}</td>
            <td>{{user.age}}</td>
            <td>{{user.sex}}</td>
            <td>
                <button ng-click="editUser(user.name,$index)">修改密码</button>
            </td>
        </tr>
    </table>
<button ng-click="addUser()">添加用户</button>
    <div ng-show="addUserIsShow">
    <table border="1px">
        <tr>
            <td>用户名:</td>
            <td>
                <input type="text" ng-model="name">
            </td>
        </tr>
        <tr>
            <td>密码:</td>
            <td>
                <input type="text" ng-model="password">
            </td>
        </tr>
        <tr>
            <td>年龄:</td>
            <td>
                <input type="text" ng-model="age">
            </td>
        </tr>
        <tr>
            <td>性别:</td>
            <td>
                <input type="text" ng-model="sex">
            </td>
        </tr>
        <tr>
            <td colspan="2" align="center">
                <button ng-click="add()">提交</button>
            </td>
        </tr>
    </table>
    </div>

angularJS表格的增删改查

猜你喜欢