angularjs的查找，全选，批量删除

来源：互联网发布：淘宝怎么激活店铺编辑：程序博客网时间：2024/06/18 11:10
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <!--样式-->    <style>        table{            border-collapse: collapse;        }         tr th{             border: 1px solid;             width: 80px;             height: 40px;         }    </style>    <!--导入angular的包-->    <script src="angular-1.5.5/angular.min.js"></script>    <script>        /*定义数组*/        var data=[            {   "name":"zs",                "age":"18",                "sex":"girl",                "salary":"18000",                "check":false            },            {"name":"ls",                "age":"28",                "sex":"boy",                "salary":"28000",                "check":false            },            {"name":"ww",                "age":"38",                "sex":"girl",                "salary":"38000",                "check":false            },            {"name":"zl",                "age":"48",                "sex":"boy",                "salary":"48000",                "check":false            }        ]        /*声明模块*/        var myapp=angular.module("myapp",[]);        /*为模块添加控制器*/        myapp.controller("myCtrl",function ($scope) {            /*初始化数组*/            $scope.data=data;            /*查询方法*/            $scope.search = function () {                $scope.cz = $scope.chazhao;            }            /*删除方法*/            $scope.shanchu=function ($index) {                $scope.data.splice($index,1);            }            /*全选*/            $scope.checkall=false;            $scope.check2=function () {             if($scope.checkall==true){                    for(var i=0;i<$scope.data.length;i++){                        $scope.data[i].check=true;                    }             }else {                 for(var i=0;i<$scope.data.length;i++){                     $scope.data[i].check=false;                 }             }            }           /*反选*/            var n=0;            $scope.count=function (index) {                if($scope.data[index].check==true){                      n++;                }else{                    n--;                }                if(n==$scope.data.length){                     $scope.checkall=true;                }else{                    $scope.checkall=false;                }            }            /*批量删除*/            $scope.delAll=function () {                for(var i=0;i<$scope.data.length;i++) {                    if($scope.data[i].check==true){                       $scope.data.splice(i,1);                       i--;                    }                }            }      })    </script></head><body ng-app="myapp" ng-controller="myCtrl"><input type="text" ng-model="chazhao"><button ng-click="search()">查找</button><table>    <tr>        <th>序号</th>        <th><input type="checkbox" ng-model="checkall" ng-click="check2()">全选</th>        <th>姓名</th>        <th>年龄</th>        <th>性别</th>        <th>薪资</th>        <th>操作<button ng-click="delAll()">批量删除</button></th>    </tr>    <tr ng-repeat="item in data|filter:cz">        <th>{{$index}}</th>        <th><input type="checkbox" ng-model="item.check" ng-click="count($index)"></th>        <th>{{item.name}}</th>        <th>{{item.age}}</th>        <th>{{item.sex}}</th>        <th>{{item.salary}}</th>        <th><button ng-click="shanchu($index)">删除</button></th>    </tr></table></body></html>
阅读全文
0 0