1. 程式人生 > >angular 對checkbox選擇框的操作例項

angular 對checkbox選擇框的操作例項

//初始資料格式
$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>