Question

ng-repeat中有一些类别，每个类别都包含一些帐户，如果选择了每个类别，则必须选择其中的所有帐户，反之亦然。此外，如果未选择一个帐户，则不会选择父类别。

我该怎么做？

视图如下：

代码小提琴：

http://jsfiddle.net/2f6qscrp/208/

感谢您的帮助。

Answer 1

这是你案件的工作小提琴，

http://jsfiddle.net/balasuar/2f6qscrp/209/

HTML

<div ng-app='home'>
    <!-- App goes here -->
    <md-content layout-padding ng-controller="MainCtrl as mainCtrl">   
            <md-checkbox ng-model="selectedAll"
                         ng-change="toggleAll()"
                         class="md-primary">
              <span ng-if="selectedAll">Un-</span>Select All
            </md-checkbox>         
            <div ng-repeat="category in naturalAccounts">
              <md-checkbox class="md-primary"  ng-model="category.selected" ng-change="toggleCategory(category)">
               {{ category.name }}
              </md-checkbox>
              <div ng-repeat="acc in category.accounts">                           
                 <md-checkbox class="md-primary" ng-model="acc.selected" ng-change="toggleAccount(category, acc)" >{{acc.name}}</md-checkbox>
               </div>
               </div>
    </md-content>
</div>

JS

angular.module('home', ['ngAria', 'ngAnimate', 'ngMaterial']);

angular.module('home').config(function ($mdThemingProvider) {
    $mdThemingProvider.theme('default')
        .primaryPalette('pink')
        .accentPalette('grey');
});

angular.module('home').controller('MainCtrl', function ($scope) {
  $scope.naturalAccounts = [
            {"id":0,"name":"category0","accounts":[{"id":0,"name":"acc0"},{"id":1,"name":"acc1"},{"id":2,"name":"acc2"}] },
            {"id":1,"name":"category1","accounts":[{"id":0,"name":"acc0"},{"id":1,"name":"acc1"},{"id":2,"name":"acc2"}] },
            {"id":2,"name":"category2","accounts":[{"id":0,"name":"acc0"},{"id":1,"name":"acc1"},{"id":2,"name":"acc2"}] }
        ];

        $scope.selectedAll = false;

        function setSelectedAll() {
           for(var i = 0; i < $scope.naturalAccounts.length; i++) {
              var category = $scope.naturalAccounts[i];
              $scope.selectedAll = category.selected;
              if(!$scope.selectedAll) {
                 break;
              }
           }
        }

        $scope.toggleAll = function() {
             for(var i = 0; i < $scope.naturalAccounts.length; i++) {
              var category = $scope.naturalAccounts[i];
              category.selected = $scope.selectedAll;

              for(var j = 0; j < category.accounts.length; j++) {
                 var account = category.accounts[j];
                 account.selected = $scope.selectedAll;             
              }
           }
        };

        $scope.toggleCategory = function(category) {
             for(var j = 0; j < category.accounts.length; j++) {
                 var account = category.accounts[j];
                 account.selected = category.selected;             
           }

           setSelectedAll();
        };

        $scope.toggleAccount = function(category, account) {
             for(var j = 0; j < category.accounts.length; j++) {
                 var account = category.accounts[j];
                 category.selected = account.selected;  
                 if(!category.selected) {
                    break;
                 }           
           }

           setSelectedAll();
        };
});

Answer 2

<input type="checkbox" ng-model="category.checked" ng-change="checkAllAccountsOfCategoryIfChecked(category)" />

和

<input type="checkbox" ng-model="account.checked" ng-change="checkOrUncheckCategoryBasedOnItsAccounts(category)" />

在您的控制器中：

$scope.checkAllAccountsOfCategoryIfChecked = function(category) {
    // TODO if category is checked, then loop over all its accounts and check them
}

$scope.checkOrUncheckParentCategory = function(category) {
    // TODO if all the category's accounts are checked, 
    // then check the category, otherwise uncheck it
}

AngularJS：循环内的复选框组

2 个答案: