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>

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

Answer 1

使用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

Answer 2

我回答的问题：http://plnkr.co/edit/d4cV1VP5iPj58ePGvZNR

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

我如何处理这个问题的方法是在selectAll＆amp; amp;上使用某种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;
    });
}

选择全部复选框以选择嵌套角度ng重复复选框？

2 个答案: