全选复选框以选择嵌套的角度 ng-repeat 复选框？

Question

我有一系列嵌套的 ng-repeat 复选框，其结构如下：

• 复选框
  • 国家
  • 国家
  • 全选
• 复选框
  • 国家
  • 国家
  • 全选

每个组中的“全选”应选中该组中的所有“国家”复选框。

你可以在这里看到它的实际效果：http://plnkr.co/edit/rBIv9lfOr5MASPia7ORS?p=preview

内部复选框由主json中的数组生成：

  $scope.carriers = 
  [{
    "name": "UPS",
    "selected": false,
    "hasPaymentOptions": false,
    "isSelectable": true,
    "value": "",
    "countries": [
        "USA","UK","Canada","Germany","Australia"
     ]
   },etc

并且在嵌套的 ng-repeat 中：

<!-- main list of carrier checkboxes -->
    <div ng-repeat="c in partnerent.carriers.carriers" class="spacer-top-md spacer-bottom-md">
      <div class="carrier spacer-bottom-sm">
        <div class="checkbox-inline">
          <label>
            <input type="checkbox" name="{{c.name | slug}}" ng-model="c.selected"> {{c.name}}
          </label>
        </div>
        <!-- inner checkboxes for countries -->
        <ul class="entitlement-countries list-inline">
          <li ng-repeat="ec in c.countries">
            <div class="checkbox-inline">
              <label>
                <input type="checkbox" name="{{ec | slug}}"> {{ec}}
              </label>
            </div>
            </li>
            <li ng-if="c.countries.length > 0">
              <div class="checkbox-inline">
                <label>
                  <input type="checkbox" name="{{ec | slug}}_selectall"> Select all
                </label>
              </div>
            </li>
        </ul>

一切正常，但我的问题是如何让这些“全选”复选框选择他们的国家组？我发现的大多数解决方案和指令都涉及该模型，并且通常用于一组复选框，其中我在 ng-repeat 中有几个。

Answer 1

我的答案很简单：http://plnkr.co/edit/d4cV1VP5iPj58ePGvZNR

注意：我没有改变所有的运营商，只是 Plunker 中的第一个

我将如何解决这个问题是在 selectAll 和子复选框上使用某种 ng-change 方法：

<ul class="entitlement-countries list-inline">
    <li ng-repeat="ec in c.countries">
        <div class="checkbox-inline">
            <label>
                <input type="checkbox" name="{{ec.name | slug}}" ng-model="ec.selected" ng-change="checkAllCountriesSelected(c)"> {{ec}}
            </label>
        </div>
    </li>
    <li ng-if="c.countries.length > 0">
        <div class="checkbox-inline">
            <label>
                <input type="checkbox" name="{{c.name | slug}}_selectall" ng-model="c.selectAll" ng-change="checkAllCountriesSelected(c)"> Select all
            </label>
        </div>
    </li>
</ul>

数据模型会稍微改变为：

$scope.carriers = 
  [{
    "name": "UPS",
    "selected": false,
    "selectAll": false,
    "hasPaymentOptions": false,
    "isSelectable": true,
    "value": "",
    "countries": [
        { name: "USA", selected: false },
        { name: "UK", selected: false },
        { name: "Canada", selected: false },
        { name: "Germany", selected: false },
        { name: "Australia", selected: false }
     ]
   },etc

我会添加更改方法：

$scope.checkCountryToggled = function checkCountryToggled (carrier) {
    var carrierCountriesSelected = getSelectedCountries(carrier);

    if (carrierCountriesSelected.length === carrier.countries.length) {
        carrier.selectAll = true;
    } else {
        carrier.selectAll = false;
    }
};

function getSelectedCountries (carrier) {
    var selectedCountries = filterFilter(carrier.countries, function (country) {
        return country.selected;
    });

    return selectedCountries || [];
}

$scope.checkSelectAllToggled = function (carrier) {
    if (carrier.selectAll) {
         selectAllCountries(carrier);
    }
};

function selectAllCountries (carrier) {
    angular.forEach(carrier.countries, function (country) {
        country.selected = true;
    });
}        

Answer 2

使用ng-checked 指令选择所有复选框。

<ul class="entitlement-countries list-inline">
  <li ng-repeat="ec in c.countries">
    <div class="checkbox-inline">
      <label>
        <input type="checkbox" name="{{ec | slug}}" ng-checked="c.countries.selectAll"> {{ec}}
      </label>
    </div>
    </li>
    <li ng-if="c.countries.length > 0">
      <div class="checkbox-inline">
        <label>
          <input type="checkbox" name="{{ec | slug}}_selectall" ng-model="c.countries.selectAll"> Select all
        </label>
      </div>
    </li>
</ul>

这里是更新的 plnkr：http://plnkr.co/edit/o2NOBmFYZMtfkBu4lTrs?p=preview