angular （全选，全不选，删除批量，删除）案例

最新推荐文章于 2026-06-24 19:38:45 发布

原创最新推荐文章于 2026-06-24 19:38:45 发布 · 1.9k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#angular #app

这篇博客详细介绍了如何在 Angular 应用中实现全选、全不选、批量删除及单个删除的功能。通过示例代码和步骤解析，帮助开发者掌握在 Angular 中进行高效数据操作的技巧。

这里写图片描述

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <script type="text/javascript" src="js/angular.min.js"></script>
        <title></title>
    </head>

    <body ng-app="app" ng-controller="ct">
        <input type="text" ng-model="gpic" placeholder="价格" />
        <input type="text" ng-model="gnum" placeholder="数量" />
        <input type="button" value="添加" ng-click="add()" />
        <input type="button" value="批量删除" ng-click="bigdele()" />
        <table cellpadding="0px" cellspacing="0px" border="1px">
            <tr>
                <td><input type="checkbox" ng-click="sel()" ng-model="selectAll" /></td>
                <td>价格</td>
                <td>数量</td>
                <td>总价</td>
                <td>操作</td>
            </tr>
            <tr ng-repeat="g in gs">
                <td><input type="checkbox" ng-checked="xu" /></td>
                <td>{{g.gname1}}</td>
                <td>{{g.gnum1}}</td>
                <td>{{g.gname1*g.gnum1}}</td>
                <td><a href="#" ng-click="del($index)">删除</a></td>
            </tr>

        </table>
        <script>
            var mo = angular.module("app", []);
            mo.controller("ct", function($scope) {
                $scope.gs = [];
                $scope.add = function() {
                    var o = {
                        "gname1": $scope.gpic,
                        "gnum1": $scope.gnum,
                        "flag": false
                    };
                    $scope.gs.push(o);
                }
                $scope.del = function($index) {
                    $scope.gs.splice("$index", 1);
                }

                $scope.sel = function() {
                    for (var i = $scope.gs.length - 1; i >= 0; i--) {
                        $scope.gs[i].flag = $scope.selectAll;
                    }
                    $scope.xu = $scope.selectAll;
                }

                $scope.bigdele = function() {
                    for (var ii = $scope.gs.length - 1; ii >= 0; ii--) {
                        var p = $scope.gs[ii];
                        if (p.flag) {
                            $scope.gs.splice("ii", 1);
                        }

                    }
                }
                $scope.selectAll = false;
                $scope.xu = $scope.selectAll;
            })
        </script>
    </body>

</html>