批量删除，排序

来源：互联网发布：最优化计算方法黄正海编辑：程序博客网时间：2024/05/23 17:46

第三

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>标题</title>    <style>        .non{            display: none;        }        .font{            color:red;        }    </style>    <script src="angular1.4.6.min.js"></script>    <script src="angular-1.5.5/angular.min.js"></script>    <script>        var myapp = angular.module("myapp",[]);        myapp.controller("myCtrl",function ($scope) {            $scope.orderName = "index";//排序的字段            $scope.order = false;//排序的方向            $scope.allCheck = false;//全部选中框            $scope.isCheck = false;//单选框            $scope.search = "";//模糊查询            $scope.items = [                {                    index:1234,                    name:"ipad",                    price:3400,                    num:10,                    check:false                },                {                    index:1244,                    name:"aphone",                    price:6400,                    num:100,                    check:false                },                {                    index:1334,                    name:"mypad",                    price:4400,                    num:20,                    check:false                },                {                    index:8234,                    name:"zpad",                    price:6400,                    num:130,                    check:false                }            ];            //删除单个            $scope.delete = function (index) {                var isDelete = confirm("确定删除？");                if(isDelete){                    for(var i = 0; i<$scope.items.length; i++){                        if ($scope.items[i].index == index){                            $scope.items.splice(i,1);                        }                    }                }            };            //删除全部            $scope.checkAll = function () {                if($scope.allCheck == true){                    for(var i = 0; i<$scope.items.length; i++){                            $scope.items[i].check = true;                    }                }else{                    for(var i = 0; i<$scope.items.length; i++){                        $scope.items[i].check = false;                    }                }            };            //每个复选框            $scope.itemCheck = function () {                var flag = 0;                for(var i = 0; i<$scope.items.length; i++){                    console.log($scope.items[i].check);                    if($scope.items[i].check == true){                        flag ++;                    }                }                if(flag == $scope.items.length){                    $scope.allCheck = true;                }else{                    $scope.allCheck = false;                }            };            //删除全部            $scope.deleteAll = function () {                var is = confirm("是否删除");                if (is == true){                    var arr = [];                    for(var i = 0; i<$scope.items.length; i++){                        if($scope.items[i].check == false){                            arr.push($scope.items[i]);                        }                    }                    $scope.items = arr;                }            };            //添加类            $scope.addClass = function () {                if($scope.items == ""){                    return "non";                }            };            //改变排序方向和字段            $scope.changeOrder = function (orderName) {                if($scope.orderName == orderName){                    $scope.order = !$scope.order;                }                $scope.orderName = orderName;            };            //变色            $scope.addClas = function (orderName) {                if (orderName == $scope.orderName){                    return "font";                }            }        });    </script></head><body ng-app="myapp" ng-controller="myCtrl" ng-class="addClass()"><input type="text" placeholder="输入关键字...." ng-model="search"><button style="background: red;" ng-click="deleteAll()">批量删除</button>    <table>        <thead>        <tr>            <th><input type="checkbox" ng-model="allCheck" ng-click="checkAll()"></th>            <th ng-click="changeOrder('index')" ng-class="addClas('index')">商品编号</th>            <th ng-click="changeOrder('name')" ng-class="addClas('name')">商品名称</th>            <th ng-click="changeOrder('price')" ng-class="addClas('price')">商品价格</th>            <th ng-click="changeOrder('num')" ng-class="addClas('num')">商品库存</th>            <th>数据操作</th>        </tr>        </thead>        <tbody>        <tr ng-repeat="item in items | filter:search | orderBy:orderName:order">            <td><input type="checkbox" ng-model="item.check" ng-click="itemCheck()"></td>            <td>{{item.index}}</td>            <td>{{item.name}}</td>            <td>{{item.price | currency:"￥"}}</td>            <td>{{item.num}}</td>            <td><button ng-click="delete(item.index)">删除</button></td>        </tr>        </tbody>    </table></body></html>

阅读全文

0 0