Angular JS filter on single value

Question

Here is what I have tried:

<section data-ng-controller="HomeController">
<table ng-repeat="item in servers | unique:'_id.idc'">
<tr>
<td> {{ item._id.idc }} </td>
</tr>
<tr ng-repeat="data in servers | filter:{_id.idc: 'LH5'}: true ">
  <td>{{data}}</td>
</tr>
</table>

This is the current output:

LH8
LH5
AMS 

If I remove the filter here is some sample from {{ data }}

{"_id":{"cluster":0,"idc":"LH8"},"Physical":{"SumCores":488,"SumMemory":3232},"Virtual":{"SumCores":2,"SumMemory":8}}
{"_id":{"cluster":1,"idc":"LH8"},"Physical":{"SumCores":256,"SumMemory":1024},"Virtual":{"SumCores":232,"SumMemory":469}}

Why is it not filtering correctly? unique works perfectly fine but the single filter does not.

Edit: I've also checked to see if the unique filter was somehow conflicting with it, but it still doesn't work without that filter in place.

Answer 1

Your filter is not formatted correctly for nested objects. It should be:

ng-repeat="data in servers | filter: { _id: { idc: 'LH5' } }"

A working, simplified example is below.

var myApp = angular.module('MyApp', []);
		
myApp.controller('MyController', ['$scope', function($scope) {
    $scope.filter = 'red';
    $scope.cars = [
        {
            make: 'Ford',
            model: 'Focus',
            year: '2012',
            colors: {
            	interior: 'red',
                exterior: 'blue'
            }
        },
        {
            make: 'Ford',
            model: 'Fusion',
            year: '2009',
            colors: {
            	interior: 'green',
                exterior: 'black'
            }
        },
        {
            make: 'Honda',
            model: 'Civic',
            year: '2011',
            colors: {
            	interior: 'red',
                exterior: 'silver'
            }
        }
    ]
}]);

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

<div ng-app="MyApp" ng-controller="MyController">
    <label for="filter">Interior color filter: </label>
    <input type="text" ng-model="filter" id="filter" />
    <div ng-repeat="car in cars | filter: { colors: { interior: filter } }">{{ car.year }} {{ car.make }} {{ car.model }}</div>
</div>