最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - AngularJS ng-repeat filter specific nested property - Stack Overflow

programmeradmin2浏览0评论

I am trying to filter an ngRepeat by a specific array attribute.

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>

The above code searches through the entire user object. This behaviour is not wanted because if any other user data attributes match the string in the selected option, then this row will also be included in the filter.

How do I ensure that the filter only works on the user.groups[0].name column?

<tr data-ng-repeat="user in users | filter:{user.groups[0].name: search.group}"> results in the following error: Syntax Error: Token '[' is unexpected.

As such, I need something to either put user.groups[0].name directly into the user object so that the filter doesn't have to access it via the array, or a way of filtering on the array object.

I am trying to filter an ngRepeat by a specific array attribute.

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>

The above code searches through the entire user object. This behaviour is not wanted because if any other user data attributes match the string in the selected option, then this row will also be included in the filter.

How do I ensure that the filter only works on the user.groups[0].name column?

<tr data-ng-repeat="user in users | filter:{user.groups[0].name: search.group}"> results in the following error: Syntax Error: Token '[' is unexpected.

As such, I need something to either put user.groups[0].name directly into the user object so that the filter doesn't have to access it via the array, or a way of filtering on the array object.

Share Improve this question asked May 5, 2014 at 11:50 GravyGravy 12.5k26 gold badges129 silver badges194 bronze badges
Add a ment  | 

2 Answers 2

Reset to default 6

You can use a custom filter function:

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

And use it:

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

If you need this more often define it as a custom filter in your module

First of all: The error is selfspeaking. Filter expects an object to check the items passed to the filter against. You cant use [] in object property names.

About your problem: So you want to show all users, that belong to a specific group. Maybe with your own filter ?

yourApp.filter("UserByGroupNameFilter", function ()
{                
    return function (arrUsers, groupName)
    {
        var resultUsers = [];
        for(var i in arrUsers){
          var user = arrUsers[i];                
            /* Loop for all columns
               for(var j in user.groups){
                 if(user.groups[j].name == groupName){
                     resultUsers.push(user);
                     break;
                }
            } 
            */
          if(user.groups[0].name == groupName){
               resultUsers.push(user);
          }
        }     
        return resultUsers;
    };
});
发布评论

评论列表(0)

  1. 暂无评论