AngularJS_table添加/批量删除数据

最新推荐文章于 2025-06-19 14:42:06 发布
Future_Master_L
最新推荐文章于 2025-06-19 14:42:06 发布
阅读量1.3k
点赞数
CC 4.0 BY-SA版权
本文链接：https://blog.youkuaiyun.com/weixin_40321535/article/details/78740492
<!DOCTYPE html>
<html>

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

    <body ng-app="Mapp" ng-controller="Mcon">

        商品名<input type="text" ng-model="ikind" value="" /> 价格<input type="text" ng-model="iprice" /> 数量<input type="text" ng-model="icount" />
        <input type="button" ng-click="onClick()" value="添加" /><br /><input type="button" ng-click="onDelAll()" value="批量删除" />

        <table border="1px" cellspacing="0" cellpadding="0">
            <tr>
                <th><input type="checkbox" ng-model="all" ng-click="selectAll()" /></th>
                <th>商品名</th>
                <th>商品数量</th>
                <th>商品价格</th>
                <th>总价</th>
                <th>操作</th>
            </tr>

            <!--//循环遍历goods数组-->
            <tr ng-repeat="good in goods">
                <td><input type="checkbox" class="sl" ng-click="checksel($index)" /></td>
                <td>{{good.kind}}</td>
                <td>{{good.count}}</td>
                <td>{{good.price}}</td>
                <td>{{good.price*good.count}}</td>
                <td><input type="button" value="删除" ng-click="del($index)" /></td>
            </tr>
        </table>

        <script type="text/javascript">
            var mapp = angular.module("Mapp", []);
            mapp.controller("Mcon", function($scope) {
                //给数组默认添加组数据
                $scope.goods = [{
                    "flag": false,
                    "kind": "足球",
                    "price": 200,
                    "count": 5
                }, {
                    "flag": false,
                    "kind": "蓝球",
                    "price": 1000,
                    "count": 3
                }];
                //点击添加按钮时
                $scope.onClick = function() {
                    //给数组添加数据
                    //给变量flag默认false(用于批量删除判断)
                    $scope.goods.push({
                        "flag": false,
                        "kind": $scope.ikind,
                        "price": $scope.iprice,
                        "count": $scope.icount
                    })
                }
                //点击删除
                $scope.del = function($index) {
                    //删除下标$index的条目
                    $scope.goods.splice($index, 1)
                }

                //点击checkbox
                $scope.checksel = function($index) {
                    //event.target返回点击的元素
                    //把flag变量也改变
                    if(event.target.checked) {
                        $scope.goods[$index].flag = true;
                    } else {
                        //把全选checkbox取消选中
                        $scope.all = false;
                        $scope.goods[$index].flag = false;
                    }
                }

                //批量删除
                $scope.onDelAll = function() {
                    $scope.all = false;
                    for(i = $scope.goods.length - 1; i >= 0; i--) {
                        //根据-变量flag的boolean值删除
                        if($scope.goods[i].flag) {
                            $scope.goods.splice(i, 1)
                        }
                    }
                }

                //checkbox全选
                $scope.selectAll = function() {
                    for(var i = $scope.goods.length - 1; i >= 0; i--) {
                        //全选/全不选
                        $scope.goods[i].flag = event.target.checked;
                        //把每行的checkbox勾选状态也同时改变
                        $(".sl")[i].checked = event.target.checked;
                    }
                }
            })
        </script>

    </body>

</html>