批量删除，排序

最新推荐文章于 2024-07-14 21:56:40 发布

junkaili

最新推荐文章于 2024-07-14 21:56:40 发布

阅读量269

点赞数

本文链接：https://blog.csdn.net/junkaili/article/details/78052433

版权

第三

<!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>