Select 所有复选框到 select 嵌套 angular ng-repeat 复选框？

Question

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

复选框
- 国家
- 国家
- select全部
复选框
- 国家
- 国家
- select全部

每个组中的 "select all" 应该 select 该组中的所有 "country" 复选框。

您可以在此处查看实际效果：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>

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

Answer 1

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

<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

Answer 2

我的回答很笨：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;
    });
}

Select 所有复选框到 select 嵌套 angular ng-repeat 复选框？

Select All checkbox to select nested angular ng-repeat checkboxes?

javascript

checkbox

angularjs