AngularJs 简单实现全选,多选操作(转)
发布时间:2020-12-17 18:10:24 所属栏目:安全 来源:网络整理
导读:代码如下: HTML: section pre{{choseArr}}/pre 全选: input type="checkbox" ng-model="master" ng-click="all(master,tesarry)" div ng-repeat="z in tesarry" input id={{z}} type="checkbox" ng-model="x" ng-checked="master" ng-click="chk(z,x)"{{z}
代码如下: HTML: <section> <pre>{{choseArr}}</pre> 全选: <input type="checkbox" ng-model="master" ng-click="all(master,tesarry)"> <div ng-repeat="z in tesarry"> <input id={{z}} type="checkbox" ng-model="x" ng-checked="master" ng-click="chk(z,x)">{{z}} </div> <a href="#" class="btn btn-danger" ng-click="delete()" > 删除</a> </section> 页面效果如下:(CSS采用bootstrap) js代码 var app = angular.module(‘app‘,[]); app.controller(‘MainCtrl‘,function($scope,$http,$timeout) { $scope.tesarry = [1,2,3,4,5]; //初始化数据 $scope.choseArr = []; //定义数组用于存放前端显示 var str = ""; // var len = $scope.tesarry.length; //初始化数据長度 var flag = ‘‘; //是否点击了全选,是为a $scope.x = false; //默认未选中 $scope.all = function(c,v) { //全选 if (c == true) { $scope.x = true; $scope.choseArr = angular.copy(v); flag = ‘a‘; } else { $scope.x = false; $scope.choseArr = []; flag = ‘b‘; } }; $scope.chk = function(z,x) { //单选或者多选 if (x == true) { //选中 $scope.choseArr.push(z) flag = ‘c‘ if ($scope.choseArr.length == len) { $scope.master = true } } else { $scope.choseArr.splice($scope.choseArr.indexOf(z),1); //取消选中 } if ($scope.choseArr.length == 0) { $scope.master = false }; }; $scope.delete = function() { // 操作CURD if ($scope.choseArr[0] == "" || $scope.choseArr.length == 0) { //没有选择一个的时候提示 alert("请至少选中一条数据在操作!") return; }; for (var i = 0; i < $scope.choseArr.length; i++) { alert($scope.choseArr[i]); console.log($scope.choseArr[i]); //遍历选中的id } }; //delete end }); (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |