獲取angular js中所有選中的復選框

Question

我是angular js的新手。 我的模板：

<div class="inputField">
    <h1>Categories</h1>
    <div>
        <label><input type="checkbox" id="all" ng-model="all" ng-change="checkAll();" ng-true-value="1">All Cuisines</label>
        <label ng-repeat="category in categories">
            <input type="checkbox" ng-checked="all"  ng-model="filter.cats[category.id]" ng-change="SingleCheck(category.id);" value="category.id">{{category.category_name}}
        </label>
    </div>

</div>

<div class="clear"></div>
<a href="javascript:void(0)" class="fRight greenBtn" ng-click="ApplyFilter();">Apply</a>

控制器：

App.controller("FilterRestCtrl",function($scope,basic,stateList){
   // stateList.autoFill();
    var home_data = {
        requestFor: "cate_states"
    }
    $scope.filter = {
        cats: []
    };
    basic.hitAPI(basic.defaultVal.sitePath + "getCategoryAndStates", {reqObject: JSON.stringify(home_data)}).success(function (response) {
        if (response.type == "success") {
            $scope.imagePath = basic.defaultVal.imagePath;
            $scope.home_data = response;
            $scope.categories= response.all_categories;
        }else if (response.type == "error") {
            basic.messages.showErrorMessage(response.message);
        }else {
            basic.messages.showErrorMessage("Oops... Something went wrong .. please try again");
        }
    });
    $scope.checkAll = function() {
        if($scope.all == 1){
            $scope.filter.cats = $scope.categories.map(function(item){ return item.id;});
        }else{
            $scope.filter.cats = [];
        }
    };
    $scope.ApplyFilter = function() {
        console.log($scope.filter.cats);
    };
    $scope.SingleCheck = function($cat){
        $scope.filter.cats.push($cat);
    }

});

首先。 我想選中所有復選框，然后單擊第一個復選框。 當我單擊“應用”然后返回一個空數組時，此檢查工作正常。 但我想檢查值。 如果我單擊檢查框，然后單擊“應用”，那么它將正常工作。 那么為什么它不能在所有選中的復選框上起作用。 我想要這樣的結果：

["48", "34", "50", "33", "35", "47", "36", "45", "49", "46", "44", "43", "42", "31", "37", "41", "38"]

Answer 1

如下所示更改您的checkAll函數。由於某種原因，您得到了一個空數組，因為if($scope.all == 1)這沒有評估為true 。

$scope.checkAll = function() {
    if($scope.all){
                  $scope.filter.cats = $scope.categories.map(function(item){ return item.id;});
    }else{
          $scope.filter.cats = [];
    }
  console.log( $scope.filter.cats) //verify this log if its populated correctly
};

如果這不起作用，請檢查checkAll函數中$scope.all的值