angular 列表全选和单选实例
angular 全选举例如下
// html代码 <body ng-app="app"> <div> <--全选功能--> <input type="checkbox" name="checkbox" ng-model="all" ng-click="updateAll(all)" ng-checked="all">全选 <div> <span ng-repeat="row in list"> <input type="checkbox" name="row.name" value="row.id" ng-click="updateSelect($event,row.id)" ng-checked="isSelected(row.id)" ng-model="all"> </span> <label for="{{row.id}}">{{row.name}}</label> </div> </div> </body> // 控制器逻辑处理 var control = app.module('textController', function($scope){ $scope.all = false;// 判断是否为全选 $scope.list = []; // 用来保存数据 $scope.selected = [];//用来存储选中的复选框 //调用api获取list值,赋值给$scope.list // 判断是否为全选 $scope.updateAll = function(val) { if(!val) { $scope.selected = []; $scope.list.forEach( row => { // 向后端发送选中数据的id。如果要发送一个对象,则可以将$scope.list直接赋值给$scope.selected $scope.selected.push(row.id); }) }else { // 置空选中的数组 $scope.selected = []; } } // 判断选中的复选框 $scope.updateSelect = function($event,id) { let checkbox = $event.target; let action = (checkbox.checked ? 'add' : 'delete') if(action == 'add' && $scope.selected.indexOf(id) == -1) { $scope.selected.push(id); } if(action == 'delete' && $scope.selected.indexOf(id) != -1) { let idx = $scope.selected.indexOf(id); $scope.selected.splice(idx,1); } if($scope.selected.length == $scope.list.length) { $scope.all = true; }else { $scope.all = false; } } // 判断是否选中 $scope.isSelected = function(id) { return $scope.selected.indexOf(id) >= 0; } })