1. 程式人生 > >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>