1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > AngularJs 多选单选以及取消选中复选框时从数组中删除值

AngularJs 多选单选以及取消选中复选框时从数组中删除值

时间:2019-02-25 16:21:38

相关推荐

AngularJs 多选单选以及取消选中复选框时从数组中删除值

复选框获取值和移除值

html页面实现:

<tr ng-repeat="item in dataList.invdata" ng-class="{'disabled':item.status == -1}"><td><div class="checkbox"><label><input type="checkbox" ng-model="item.selected" ng-disabled="item.status == -1" ng-change="selectChangeItem(item);"></label></div></td></tr>

angular实现:

// 初始化集合$scope.selectArray = [];$scope.selectChangeItem = function(item) {// 选中的值if(item.selected) {// 选中的值保存到集合$scope.selectArray.push(item);console.info("===ADD===>",$scope.selectArray);}else{// 获取该值在集合中的下标索引var index = $scope.selectArray.indexOf(item);// 从index下标开始,截取一个数据$scope.selectArray.splice(index,1);console.info("===REMOVE===>",$scope.selectArray);}}

单选获取值

1、在html页面不做改动

2、修改ng-model="item.selected"为单选。

// 初始化selectItemInfo $scope.selectItemInfo = {};$scope.selectChangeItem = function (item) {if (!item.selected) {$scope.selectItemInfo = {};$scope.showOpBarDiv = false;return;}else{$scope.selectItemInfo = item;}console.info("==VAL==>",$scope.selectItemInfo);// 取消其它的选择,该列表只能单选,且不能跨页选择$scope.updateSelectedBtn(item);}// 设置多选为单选 (设置单选只供参考)$scope.updateSelectedBtn = function (selectItem) {if(!$scope.dataList || !$scope.dataList.invdata) {return ;}angular.forEach($scope.dataList.invdata, function (item, index, array) {if (item.selected) {if (selectItem) {if (item.id != selectItem.id) {item.selected = false;}}else {item.selected = false;}}});}

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