AngularJs增删改查

来源：互联网发布：聊骚软件靠谱吗编辑：程序博客网时间：2024/05/22 02:29
AngularJs的增删改查,排序,全选全不选,批量删除
<script type="text/javascript" src="../js/angular.min.js"></script>         <script type="text/javascript">            var app=angular.module("myApp",[]);            app.controller("myCon",function($scope){                $scope.users=[{                    name:"张三",                    age:20,                    city:"北京",                    dates:"2017-02-12 14:23:35",                    check:false                },{                    name:"李四",                    age:35,                    city:"上海",                    dates:"2017-04-18 16:34:34",                    check:false                },{                    name:"王五",                    age:32,                    city:"河北",                    dates:"2017-07-23 09:12:02",                    check:false                }];                //用户名模糊查询                $scope.sele="";                //点击添加显示用户信息框                $scope.isShow=false;                $scope.addUser=function(){                    if($scope.isShow){                        $scope.isShow=false;                    }else{                        $scope.isShow=true;                    }                }                //单个删除                $scope.del=function($index){                    $scope.users.splice($index,1);                }                //添加数据                $scope.addName="";                $scope.addAge="";                $scope.addCity="";                $scope.baocun=function(){                    var addAll={                        name:$scope.addName,                        age:parseInt($scope.addAge),                        city:$scope.addCity,                        dates:new Date()                    };                    $scope.users.push(addAll);                }                //全选                $scope.all= function (sel) {                      for(var i=0;i<$scope.users.length;i++){                        if(sel===true){                            $scope.users[i].state=true;                        }else {                            $scope.users[i].state=false;                        }                      }                  };                  //批量删除                $scope.delAll=function(){                    var isSel=[];                    for(index in $scope.users){                        if($scope.users[index].state){                            isSel.push($scope.users[index]);                        }                    }                    for(index in isSel){                        var name=isSel[index].name;                        for(index2 in $scope.users){                            if(name==$scope.users[index2].name){                                $scope.users.splice(index2,1);                            }                        }                    }                }               //修改                $scope.upDate=function($index){                    //显示用户信息框                    $scope.isShow=true;                    var names=$scope.users[$index].name;                    var ages=$scope.users[$index].age;                    var citys=$scope.users[$index].city;                    //回显,将数据放入输入框中                    $scope.addName=names;                    $scope.addAge=ages;                    $scope.addCity=citys;                    $scope.xg=$index;                }                //修改后保存                $scope.baocun=function(){                    var newUser={                        name:$scope.addName,                        age:$scope.addAge,                        city:$scope.addCity,                        dates:new Date                    };                    $scope.users.splice($scope.xg,1,newUser);                }            });        </script>    </head>    <body ng-app="myApp" ng-controller="myCon">        <h4>管理信息</h4><br />        <center>            <input type="button" value="批量删除" ng-click="delAll()"/>            用户名查询<input type="text" ng-model="sele"/>            <select ng-model="orderAge">                <option value="">--查询--</option>                <option value="age">年龄正序查询</option>                <option value="-age">年龄倒序查询</option>            </select>            <input type="button" value="添加" ng-click="addUser()"/>            <table border="1px solid" cellpadding="10px" cellspacing="0px">                <thead>                    <tr>                        <th><input type="checkbox" ng-model="selectAll" ng-click="all(selectAll)"/></th>                        <th>姓名</th>                        <th>年龄</th>                        <th>城市</th>                        <th>录入日期</th>                        <th>操作</th>                    </tr>                </thead>                <tbody>                    <tr ng-repeat="user in users | filter:{name:sele} | orderBy:orderAge">                        <td><input type="checkbox" ng-checked="selectAll" ng-model="user.state" ng-click="fanCheck()"/></td>                        <td>{{user.name}}</td>                        <td>{{user.age}}</td>                        <td>{{user.city}}</td>                        <td>{{user.dates | date:"yyyy-MM-dd hh:mm:ss"}}</td>                        <td><input type="button" value="修改" ng-click="upDate($index)"/><input type="button" value="删除" ng-click="del($index)"/></td>                    </tr>                </tbody>            </table>            <div ng-show="isShow" style="margin-top: 30px; text-align: center; border: 1px solid">                <h4>用户信息</h4>                姓名<input type="text" ng-model="addName"/><br />                年龄<input type="text" ng-model="addAge"/><br />                城市<input type="text" ng-model="addCity"/><br />                <input type="button" value="保存" ng-click="baocun()" ng-model="xg"/><br />            </div>        </center>    </body>
这里写图片描述
阅读全文
0 0