angularjs表格批量删除和全选反选

最新推荐文章于 2018-05-22 22:57:00 发布

努力努力更努力

最新推荐文章于 2018-05-22 22:57:00 发布

阅读量1k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： angluarjs 文章标签： angularjs

本文链接：https://blog.youkuaiyun.com/qq_40317838/article/details/78037306

angluarjs 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了一个使用AngularJS实现的商品管理系统示例，该系统包括商品列表显示、排序、过滤、单选及全选功能，并提供了批量删除等功能。通过这个示例可以了解AngularJS的数据绑定和指令等基本用法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<style>
    table {
        border: 1px solid #000;
        border-collapse: collapse;
    }

    tr, td {
        border: 1px solid #000;
        border-collapse: collapse;
        padding: 10px;
    }
    .font{
        color: red;
    }
</style>
<script src="script/angular.min.js"></script>
<script>
    var myapp = angular.module("myapp", []);
    var items = [
        {"nums": "1234", "name": "ipad", "price": 3400, "kucun": 10,check:false},
        {"nums": "1547", "name": "iphone8", "price": 8900, "kucun": 100,check:false},
        {"nums": "1456", "name": "iphone9", "price": 10800, "kucun": 520,check:false},
        {"nums": "1454", "name": "ipad5", "price": 5600, "kucun": 40,check:false}
    ];
    myapp.controller("myctrl", function ($scope) {
        $scope.items = items;
        $scope.delete = function ($index) {

            if($index>=0){
                if(confirm("是否删除"+$scope.items[$index].name+"商品") ){
                    $scope.items.splice($index,1);
                }
            }
        };
        $scope.order="nums";
        $scope.allcheck=false;
        $scope.ischeck=false;
        $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++){
                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<items.length;i++){
                    if(items[i].check==false){
                        arr.push(items[i]);
                    }
                }
                $scope.items=arr;
            }
        };
        $scope.addclass=function (name) {

                return "font";

        }

    });
</script>
<body ng-app="myapp" ng-controller="myctrl">
<input type="text" ng-model="query"/>
<button ng-click="deleteall()">批量删除</button>
<table>
    <tr>
        <td><input type="checkbox" ng-model="allcheck" ng-click="checkall()"/></td>
        <td ng-click="haha1('nums'); desc=!desc" ng-class="addclass('nums')">id</td>
        <td ng-click="haha1('name'); desc=!desc" ng-class="addclass('nums')">名称</td>
        <td ng-click="haha1('price'); desc=!desc" ng-class="addclass('nums')">价格</td>
        <td ng-click="haha1('kucun'); desc=!desc" ng-class="addclass('nums')">库存</td>
        <td>操作</td>
    </tr>
    <tr ng-repeat="item in items | orderBy:order:desc | filter:query">
        <td><input type="checkbox"ng-model="item.check" ng-click="itemcheck()"/></td>
        <td>{{item.nums}}</td>
        <td>{{item.name}}</td>
        <td>{{item.price | currency:'￥：'}}</td>
        <td>{{item.kucun}}</td>
        <td>
            <button ng-click="delete($index)">删除</button>
        </td>
    </tr>
</table>
</body>