Angular 实现全选的的功能

demo:

html 
        <div ng-controller="CheckboxCtrl">
            <label for="chkAll">全选:</label>
            <input id="chkAll" type="checkbox" ng-model="chkall" ng-click="chkAll(chkall)"/>
            <div ng-repeat="item in chkArr">
            <input type="checkbox" ng-model="item.checked"/>{{item.text}}
        </div>   
        <div>你选中的是:{{choseArr}}</div>
    </div>
    

        js
    angular.module('apper',[]).controller('CheckboxCtrl',['$scope','$filter',function($scope,$filter){
        $scope.chkall = false;
            $scope.chkArr = [
                {id: 1, text: "足球",checked: false},
                {id: 2, text: "蓝球",checked: true},
                {id: 3, text: "乒乓球",checked: false},
                {id: 4, text: "网球",checked: false}
            ];
            $scope.chkAll = function(checked){
                    angular.forEach($scope.chkArr, function(value, key){
                    value.checked = checked;
                    });
         };
            $scope.$watch('chkArr', function(nv, ov){
                    if(nv == ov){
                        return;
             }
            $scope.choseArr = [];
                            angular.forEach($filter('filter')(nv, {checked: true}), function(v) {
                            $scope.choseArr.push(v.text);
                    });
                     $scope.chkall = $scope.choseArr.length == $scope.chkArr.length;
                 }, true);

    }]);

改变 checked的状态之后 一定要用$watch去监听 $scope.chkArr数组的变化 只要数组变化了 在重新获取变化的值

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容