angular 對checkbox選擇框的操作例項
阿新 • • 發佈:2019-01-25
//初始資料格式 $scope.pigdatalists = [ {"id":1,"checked":false},{"id":2,"checked":false}, {"id":3,"checked":false} ]; //全選 scope.checkearall = false;//預設不是全選狀態 scope.checkearAll = function(checked){ //改變全選按鈕的狀態 scope.checkearall = !scope.checkearall; //迴圈操作資料,將每條資料裡面的checked值跟全選狀態的值對應起來 angular.forEach(scope.pigdatalists,function(value,key){ value.checked = scope.checkearall; }); }; //單選 scope.checkearItemFun = function(checked,index){ scope.pigdatalists[index].checked = checked; }
<ul class=""> <li class="col-xs-12"> <div class="col-xs-3 aligncenter" > <input type="checkbox" class="pigdatavalitemcheck" name="checkpig" id="checkallpigdata" ng-model="checkearall" ng-click="checkearAll(checkearall)" /><label for="checkallpigdata"> 全選</label> </div> <span class="pigdatavalitem col-xs-3">耳號</span> <span class="pigdatavalitemblock col-xs-3" >棟舍</span> <span class="pigdatavalitemfield col-xs-3" >欄位</span> </li> <li ng-repeat="item in pigdatalists" class="col-xs-12" ng-class="{'activedbackgroundcolor2':item.checked}"> <div class="col-xs-3 aligncenter"> <input type="checkbox" class="pigdatavalitemcheck" name="checkpig" ng-model="item.checked" ng-click="checkearItemFun(item.checked,$index)" /> </div> <span class="pigdatavalitem col-xs-3" ng-bind="item.price"></span> <span class="pigdatavalitemblock col-xs-3" ng-bind="item.name"></span> <span class="pigdatavalitemfield col-xs-3" ng-bind="item.name"></span> </li> </ul>