javascript - AngularJS ng-repeat 过滤器特定的嵌套属性

Question

我正在尝试通过特定数组属性过滤 ngRepeat。

js:

app.controller('UserIndexController', function ($scope, $http, $window) {

    $scope.search = {};

    $http({ method: 'GET', url: '/api/v2/group' })
        .success(function(data, status, headers, config) {

            $scope.groups = data;

        })
        .error(function(data, status, headers, config) {

        });

    $http({ method: 'GET', url: '/api/v2/user' })
        .success(function(data, status, headers, config) {

            $scope.users = data;

        })
        .error(function(data, status, headers, config) {

        });
});

html:

<div data-ng-controller="UserIndexController">
<select 
    ng-model="search.group" 
    ng-options="group.name as group.name for group in groups" 
    class="form-control">
    <option value="">Filter Users by Group</option>
</select>

<table class="table table-responsive table-striped table-hover">
        <thead>
    <tr>
            <th>User Type</th>
            <th>Email</th>
        <th>Name</th>
            </tr>
        </thead>
        <tbody>
        <tr data-ng-repeat="user in users | filter:search.group">
        <td><% user.groups[0].name %></td>
        <td><% user.last_name %>, <% user.first_name %></td>
        <td><% user.email %></td>
    </tr>
    </tbody>
    </table>
</div>

以上代码搜索整个用户对象。这种行为是不需要的，因为如果有任何其他 user数据属性与所选选项中的字符串匹配，则此行也将包含在过滤器中。

如何确保过滤器仅适用于 user.groups[0].name专栏？

<tr data-ng-repeat="user in users | filter:{user.groups[0].name: search.group}">导致以下错误:Syntax Error: Token '[' is unexpected .

因此，我需要一些东西来放置 user.groups[0].name直接进入用户对象，这样过滤器就不必通过数组或对数组对象进行过滤的方式来访问它。

Answer 1

您可以使用自定义过滤器函数:

$scope.groupMatcher = function(groupFilter) {
  return function(user) {
    return user.groups[0].name === groupFilter;
  }
};

并使用它:

<ul>
  <li ng-repeat="user in users | filter:groupMatcher('2')">
    {{user.name}}
  </li>
</ul>

如果您经常需要它，请将其定义为模块中的自定义过滤器