Angular JS过滤器重复

洪都

我有两个范围：用户和用户组。

$scope.user = [
{id: 1, username: 'Vasya1', group_id: 1},
{id: 2, username: 'Vasya2', group_id: 1},
{id: 3, username: 'Vasya3', group_id: 2}
];

$scope.userGroups = [
{id: 1, groupname: 'name1'},
{id: 2, groupname: 'name2'}
];

users.group_id是userGroups的外键。我需要为每个组的用户范围创建过滤器。

<div ng-repeat="(gKey, g) in userGroups">
    <div ng-repeat="(uKey, u) in users">
    ...
    </div>
</div>

如何添加过滤器？

斯里坎特

您可以使用角度滤镜并实现它。

var app = angular.module("sampleApp", []);

app.controller("sampleController", ["$scope",
  function($scope) {
    $scope.users = [{
      id: 1,
      username: 'Vasya1',
      group_id: 1
    }, {
      id: 2,
      username: 'Vasya2',
      group_id: 1
    }, {
      id: 3,
      username: 'Vasya3',
      group_id: 2
    }];

    $scope.userGroups = [{
      id: 1,
      groupname: 'name1'
    }, {
      id: 2,
      groupname: 'name2'
    }];
  }
]);

.group {
  padding: 10px;
}
.group:nth-child(even) {
  background-color: #cecece;
  color: #212121;
}
.group:nth-child(odd) {
  background-color: #989898;
  color: #dedede;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
<div ng-app="sampleApp">
  <div ng-controller="sampleController">
    <div ng-repeat="group in userGroups" class="group">
      Group Name: {{group.groupname}}
      <div ng-repeat="user in users | filter: { group_id: group.id}">
        User Name: {{user.username}}
      </div>
    </div>
  </div>
</div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。