My Little World

利用checkbox进行各种勾选

发表于

单选

1
2
3
4
5
html:
<div ng-repeat="item in labels track by $index" style="padding-left: 50px">
  <label class="mt-checkbox mt-checkbox-single mt-checkbox-outline" ><input  type="checkbox" ng-model="item.isSelected" ng-click="updateSingelSelection($index,labels)" /><span></span></label>
  <label>{{item.name}}</label>
</div>

val1为选定值的key,或者叫序号,val2为选项集合

1
2
3
4
5
6
7
 $scope.updateSingelSelection = function(val1, val2) {
  $scope.label = val2[val1];  												//对选定的值做处理
  angular.forEach(val2, function(x, index) {				 //处理其他选项为未选状态
    if (val1 != index)
      x.isSelected = false;
  });
}

checkbox1

多选

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<div class="portlet-body dataTables_wrapper" style="margin: -20px 20px 0px 20px;" ng-if="detaildata.goods.length>0">
	<div class="table-scrollable">
		<table class="table table-bordered table-hover no-footer">
			<thead>
				<tr role="row" class="heading">
					<th>ID</th>
					<th>
						<label class="mt-checkbox mt-checkbox-single mt-checkbox-outline"><input type="checkbox" ng-model="detaildata.goods.allchecked" ng-change="selectall()"/><span></span></label>
					</th>
				</tr>
			</thead>
			<tbody>
				<tr role="row" ng-repeat="item in detaildata.goods track by $index">
					<td>{{item.id}}</td>
					<td>
						<label class="mt-checkbox mt-checkbox-single mt-checkbox-outline"><input  type="checkbox" ng-model="item.checked" ng-click="UpdateSelection($index)"/><span></span></label>
					</td>
				</tr>
			</tbody>
		</table>
	</div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 $scope.UpdateSelection = function(index){
    if($scope.detaildata.goods[index].checked){

      tempdata2.push($scope.detaildata.goods[index]); 					//处理选中项

      if(tempdata2.length == $scope.detaildata.goods.length){   //判断是否满足全选条件，						$scope.detaildata.goods.allchecked = true;                //满足则将全选按钮设置为勾选状态
      }else{
        $scope.detaildata.goods.allchecked = false;             //否则为未选状态
      }
    } else {
      $scope.alldata.goods[index].checked = false; //全选按钮设为
      angular.forEach(tempdata2, function(list,num){
        if($scope.detaildata.goods[index].deal_id == list.deal_id){
         tempdata2.splice(num,1);
         $scope.detaildata.goods.allchecked = false;
         return;
       }
     });

    }
}


图片名称
图片名称

全选

注意：若全选按钮放在表格里，那全选按钮的绑定值S也一定要是整个表格绑定值A的一个属性,即，A.S是全选按钮绑定值

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
$scope.selectall = function(){
 if($scope.detaildata.goods.allchecked){
  for(var i = 0;i < $scope.detaildata.goods.length;i++){
    $scope.detaildata.goods[i].checked = true;       //把每个备选项处理为已选状态
    var num = 0;
    for(var j = 0;j < tempdata2.length;j++){
      if($scope.detaildata.goods[i].deal_id != tempdata2[j].deal_id){
        num = num+1;
      }else{
        num = num;
      }
    }
    if(num == tempdata2.length){
      tempdata2.push($scope.detaildata.goods[i]); //将所有为选择的数据处理到临时集合
    }
  }
}else{
  for(var i = 0;i < $scope.detaildata.goods.length;i++){
    $scope.detaildata.goods[i].checked = false; //把每个备选项处理为未选状态
  }
  tempdata2 = []; //清空临时集合
}
}

勾选方法提炼

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
//表格勾选 tempdata勾选数据集合，data所有待选数据集合，status勾选状态，keyword数据标志属性
APP.factory('selectAll', function(){
    //全选按钮的勾选
  var allChoose = function (tempdata,data,status,keyword1,keyword2) {
        if(status){
            for(var i = 0;i < data.length;i++){
              data[i].isSelected = true;       //把每个备选项处理为已选状态
              var num = 0;
              for(var j = 0;j < tempdata.length;j++){
                if(data[i][keyword1] != tempdata[j][keyword2]){
                  num = num+1;
                }else{
                  num = num;
                }
              }
              if(num == tempdata.length){
                tempdata.push(data[i]); //将所有未选择的数据处理到临时集合
              }
            }
          }else{
            for(var i = 0;i < data.length;i++){
              data[i].isSelected = false; //把每个备选项处理为未选状态
               angular.forEach(tempdata, function(item,num){
                if(data[i][keyword1] == item[keyword2]){
                tempdata.splice(num,1);
               }
             });
            }
          }
      return {
        'tempdata':tempdata,
        'data':data
       };
  };

  //检查是否满足全选
  var checkAll = function (tempdata,data,keyword1,keyword2) {
       var temp =0;
        angular.forEach(data, function(item){
          item.isSelected = false;
          angular.forEach(tempdata, function(term){
            if(item[keyword1] == term[keyword2]){
              item.isSelected = true;
              temp +=1;
            }
          });
        });
        if(temp == data.length){
          return {
            'allChecked':true,
            'data':data,
            'tempdata':tempdata
           };
        }else{
          return {
            'allChecked':false,
            'data':data,
            'tempdata':tempdata
          };
       }
  };

  //单项勾选
  var UpdateSelection = function(tempdata,data,index,keyword1,keyword2){
     if(data[index].isSelected){ //添加选中
            tempdata.push(data[index]);
          }else{
            angular.forEach(tempdata, function(item,num){
              if(data[index][keyword1] == item[keyword2]){
               tempdata.splice(num,1);
             }
           });
          }
     return checkAll(tempdata,data,keyword1,keyword2)
  };

  //众多选项单选
  var singleSelection = function (choseindex,data) {
      angular.forEach(data, function(x, index) {
          if (choseindex != index)
            x.isSelected = false;
        });
      return data;
  };

  return {
    'allChoose': allChoose,
    'checkAll':checkAll,
    'UpdateSelection':UpdateSelection,
    'singleSelection':singleSelection
  };
})