javascript - AngularJS - 将 ng-repeat 分成不同的过滤器或组

Question

我有一个列表，我想将其分组到页面上的不同部分。

我目前是这样划分的(代码被缩短以便于阅读):

<div ng-repeat="role in roles | filter: { Type: 'AA'}">
   <input class="styled" type="checkbox" value="{{ role.Value }}" />
   <label>{{ role.Name }}</label>
</div>
<div ng-repeat="role in roles | filter: { Type: 'BB'}">
   <input class="styled" type="checkbox" value="{{ role.Value }}" />
   <label>{{ role.Name }}</label>
</div>
<div ng-repeat="role in roles | filter: { Type: 'CC'}">
   <input class="styled" type="checkbox" value="{{ role.Value }}" />
   <label>{{ role.Name }}</label>
</div>
<div ng-repeat="role in roles | filter: { Type: 'DD'}">
   <input class="styled" type="checkbox" value="{{ role.Value }}" />
   <label>{{ role.Name }}</label>
</div>
<div ng-repeat="role in roles | filter: { Type: 'EE'}">
   <input class="styled" type="checkbox" value="{{ role.Value }}" />
   <label>{{ role.Name }}</label>
</div>
...

我认为这会循环遍历每个组的列表，这似乎效率不高。

我很好奇是否有更好的方法来做到这一点？例如，在顶部只有一个 ng-repeat 并在子部分中进行过滤。

Answer 1

如果我理解正确的话，这应该可以解决问题。

angular.module("roleApp", [])
  .controller('myCtrl', myCtrl);

function myCtrl($scope) {
  $scope.people = [{
    name: 'Penelope',
    role: 'AA'
  }, {
    name: 'Franklin',
    role: 'BB'
  }, {
    name: 'Stewart',
    role: 'CC'
  }, {
    name: 'Keith',
    role: 'DD'
  }, {
    name: 'Paula',
    role: 'EE'
  }, {
    name: 'Maria',
    role: 'BB'
  }, {
    name: 'Claudette',
    role: 'EE'
  }];


  var indexedRoles = [];

  $scope.rolesToFilter = function() {
    indexedRoles = [];
    return $scope.people;
  };

  $scope.filterRoles = function(person) {
    var roleIsNew = indexedRoles.indexOf(person.role) == -1;
    if (roleIsNew) {
      indexedRoles.push(person.role);
    }
    return roleIsNew;
  }
}

h1 {
  font-size: 16px;
  font-weight: bold;
  padding: 0;
}
h2 {
  font-size: 14px;
  font-weight: bold;
  margin: 0;
  padding: 0;
}
p {
  font-size: 12px;
  margin-left: 1em;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div ng-app="roleApp" ng-controller="myCtrl">
  <h1>ROLES:</h1>
  <div ng-repeat="personPerRole in rolesToFilter() | filter:filterRoles">
    <h2>{{personPerRole.role}} :</h2>
    <p ng-repeat="person in people | filter:{role: personPerRole.role}">{{person.name}}</p>
  </div>
</div>