AngularJS ng-repeat filter specific nested property

Question

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.

Answer 1

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

Answer 2

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;
    };
});