AngularJs增删改查

最新推荐文章于 2022-07-15 10:37:12 发布

Stagefright

最新推荐文章于 2022-07-15 10:37:12 发布

阅读量694

点赞数 1

本文链接：https://blog.csdn.net/L59_1/article/details/78834098

版权

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>

这里写图片描述

Stagefright

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
AngularJs增删改查

AngularJs的增删改查,排序,全选全不选,批量删除<script type="text/javascript" src="../js/angular.min.js"></script> <script type="text/javascript"> var app=angular.module("myApp",[]); app.
复制链接

扫一扫