Question

这是我的代码

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head></head>
<script>
  var app = angular.module("myApp", []);
  app.controller("myCtrl", function($scope) {
    $scope.records = [
      "ALL",
      "KOREAN",
      "ENGLISH",
      "CHINESE",
      "JAPANESE",
      "GERMAN",
      "FRENCH",
      "ITALIAN",
      "SPANISH",
      "OTHERS",
    ]
  });
</script>

<body class="other_page" ng-app="myApp">
  <table class="checkbox_table" ng-controller="myCtrl">
    <tr>
      <td colspan="3" class="filter_subtitle_td">
        <div class="filter_subtitle">
          <span>
            CATEGORY
          </span>
        </div>
      </td>
    </tr>
    <tr ng-repeat="x in records" ng-if="$index % 3 == 0">
      <td class="checkbox_td">
        <input type="checkbox" id="{{records[$index]}}" class="category_filter_checkbox" ng-model="all" />
        <label for="{{records[$index]}}" class="checkbox_label">
          {{records[$index]}}
        </label>
      </td>
      <td class="checkbox_td" ng-if="x != ''">
        <input type="checkbox" id="{{records[$index + 1]}}" class="category_filter_checkbox" ng-checked="all" />
        <label for="{{records[$index + 1]}}" class="checkbox_label">
          {{records[$index + 1]}}
        </label>
      </td>
      <td class="checkbox_td" ng-if="x != ''">
        <input type="checkbox" id="{{records[$index + 2]}}" class="category_filter_checkbox" ng-checked="all" />
        <label for="{{records[$index + 2]}}" class="checkbox_label">
          {{records[$index + 2]}}
        </label>
      </td>
    </tr>
  </table>
</body>

</html>

我的问题是：

如果没有数据，如何让ng-repeat停止？
如何仅提供'ALL'数据ng-model，以便点击此'ALL'复选框选择其他复选框？

感谢您的帮助

Answer 1

我认为你选择的方式太复杂了。

为简化起见，您可以使用lodash.com或underscorejs并将数组拆分为以下块：$scope.records = _.chunk(data, 3);

因此输出将是：

[[{"type":"ALL","value":false},{"type":"KOREAN","value":false},{"type":"ENGLISH","value":false}],[{"type":"CHINESE","value":false},{"type":"JAPANESE","value":false},{"type":"GERMAN","value":false}],[{"type":"FRENCH","value":false},{"type":"ITALIAN","value":false},{"type":"SPANISH","value":false}],[{"type":"OTHERS","value":false}]]

此外，为了使checkboses能够与ng-model一起正常工作，我们需要传递非原始但对象为{type:<NAME>, value:true/false}：

var data = [
  {type:"ALL",value:false},
  {type:"KOREAN",value:false},
  {type: "ENGLISH",value:false},
  {type: "CHINESE",value:false},
  {type:"JAPANESE",value:false},
  {type: "GERMAN",value:false},
  {type:"FRENCH",value:false},
  {type:"ITALIAN",value:false},
  {type:"SPANISH",value:false},
  {type:"OTHERS",value:false}
  ];
  $scope.all = angular.copy(data[0]);
  $scope.records = _.chunk(data, 3);

因此，您的HTML将如下所示：

    <table class="checkbox_table" ng-controller="myCtrl">
    <tr>
      <td colspan="3" class="filter_subtitle_td">
        <div class="filter_subtitle">
          <span>
            CATEGORY
          </span>
        </div>
      </td>
    </tr>
    <tr ng-repeat="record in records" >      
      <td  ng-repeat="x in record"  > 
        <input type="checkbox"   ng-model="all.value" ng-if="x.type === 'ALL'" />
        <input type="checkbox"  ng-model="x.value"  ng-checked="all.value" ng-if="x.type !== 'ALL'" />
        <label for="{{x.type}}"  ng-if="x.type !== 'ALL'" >{{x.type}}</label>
        <label for="{{all.type}}"  ng-if="x.type === 'ALL'" >{{x.type}}</label>
     </td>   
    </tr>
  </table>

Demo Fiddle

带有重复

1 个答案: