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

复选框获取值和移除值

html页面实现:


    
        

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;
             }
        }
    });
}

 

你可能感兴趣的:(科技相关,AngularJs,angular,Angular学习笔记)