1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > angularjs操作CheckBox单选 多选 全选 反选

angularjs操作CheckBox单选 多选 全选 反选

时间:2023-09-29 07:53:03

相关推荐

angularjs操作CheckBox单选 多选 全选 反选

angularjs操作CheckBox单选、多选、全选、反选

应用场景:分页查询出列表中,对已勾选的数据跳转到下一页面进行展示。CheckBox可进行单选、多选、全选、反选。当所有都勾选上时,全选按钮选上,有一条数据取消勾选时,全选按钮取消勾选

js代码:

var arrData = new Array(); //选择查询出来的数据$scope.markArr=new Array(); //选择的序号 跳到第二页回来回显$scope.allClick=new Array(); //用于从第二页回到第一页时全选按钮回显//点击全选$scope.clickAll = function(current){var e=e||event;var target= e.srcElement? e.srcElement: e.target;if (target.checked) {$scope.allClick.push(current); //current为页数$.each($scope.result,function(index,ele){if(arrData.indexOf(($scope.result)[index])==-1){//防止重复添加arrData.push(($scope.result)[index]); //将勾选的数据添加到arrData$scope.markArr.push(($scope.resultXh.current-1)*$scope.resultXh.size+index); //将勾选到的序号添加到markArr中}});} else {//取消全选var l = $scope.allClick.indexOf(current);$scope.allClick.splice(l,1);$.each($scope.result,function(index,ele){var i = arrData.indexOf(($scope.result)[index]);arrData.splice(i,1);var j = $scope.markArr.indexOf(($scope.resultXh.current-1)*$scope.resultXh.size+index);$scope.markArr.splice(j,1);});}}//点击单选$scope.checkClick = function (e,x) {var e=e||event;var target= e.srcElement? e.srcElement: e.target;if (target.checked) {arrData.push(($scope.result)[x]);$scope.markArr.push(($scope.resultXh.current-1)*$scope.resultXh.size+x);//全部勾选时,把全选按钮勾上var allFlag = true;$.each($scope.result,function(index,ele){if(arrData.indexOf(($scope.result)[index])==-1){allFlag = false;return false;}});if(allFlag){$scope.allClick.push($scope.resultXh.current);}} else {//取消单选var i = arrData.indexOf(($scope.result)[x]);arrData.splice(i,1);var j = $scope.markArr.indexOf(($scope.resultXh.current-1)*$scope.resultXh.size+x);$scope.markArr.splice(j,1);//全选标志去掉var ind = $scope.allClick.indexOf($scope.resultXh.current);if(-1!=ind){$scope.allClick.splice(ind,1);}}}

html:

<table class="tab01-cailiao"><tr><th width="40"><input type="checkbox" ng-click="clickAll(resultXh.current)" ng-checked="-1!=allClick.indexOf(resultXh.current)"/</th><th width="50">序号</th></tr><tr ng-repeat="item in result"><td><input ng-checked="-1!=markArr.indexOf((resultXh.current-1)*resultXh.size+$index)" type="checkbox" ng-click="checkClick($event,$index)"/></td><td ng-bind="(resultXh.current-1)*resultXh.size+$index+1"></td></tr></table>

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。