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.

Drew Gaynor · Accepted Answer · 2015-09-18T11:08:41.130

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>

`Error: [$parse:syntax] Syntax Error: Token '{' is unexpected, expecting [:] at column 25 of the expression [servers | filter: { _id { idc: 'LH5' } }] starting at [{ idc: 'LH5' } }]. http://errors.angularjs.org/1.2.28/$parse/syntax?p0=%7B&p1=is%20unexpected%2C%20expecting%20%5B%3A%5D&p2=25&p3=servers%20%7C%20filter%3A%20%7B%20_id%20%7B%20idc%3A%20'LH5'%20%7D%20%7D&p4=%7B%20idc%3A%20'LH5'%20%7D%20%7D` — CMS, Sep 18 '15 at 08:04

Kashif Mustafa · Answer 2 · 2015-09-17T15:23:08.447

0

you add data first like

    <tr ng-repeat="data in servers | filter:{data.idc : 'LH5'}">
      <td>{{data}}</td>
    </tr>

edited Sep 17 '15 at 15:23

answered Sep 17 '15 at 15:20

Kashif Mustafa

1,152
6
20

Also did not work I'm afraid - also this is syntactically incorrect, you are missing a " – CMS Sep 17 '15 at 15:22
try it now , i have changed it – Kashif Mustafa Sep 17 '15 at 15:24

score 0 · Answer 3 · edited May 23 '17 at 12:29

0

If you want to use in your own way, you need to add one more JS file from here

See this question for more detail

edited May 23 '17 at 12:29

Community

1
1

answered Sep 17 '15 at 15:24

Ali Adravi

21,707
9
87
85

It is this bit which is not working: `filter:{_id.idc : 'LH5'}` – CMS Sep 17 '15 at 15:27

Index · Answer 4 · 2015-09-17T15:57:17.753

From your example I assume your data structure looks something like this:

data: {
    propA: 'A',
    proB: 'B',
    _id: {
        idc: 'LH5'
    }
}

Your problem is that you are trying to get a match on a sub-property of the object(s) you are iterating over.

From the docs:

Note that a named property will match properties on the same level only, while the special $ property will match properties on the same level or deeper. E.g. an array item like {name: {first: 'John', last: 'Doe'}} will not be matched by {name: 'John'}, but will be matched by {$: 'John'}.

So I'd try:

<tr ng-repeat="data in servers | filter:{$: 'LH5'}: true ">
  <td>{{data}}</td>
</tr>

http://jsfiddle.net/kb598pby/

score 0 · Answer 5 · answered Sep 17 '15 at 15:49

0

You are filtering by nested attribute, the expression you passed to your filter does not evaluate to the valid javascript object. You should do:

<tr ng-repeat="data in servers | filter:{_id: [{idc: 'LH5'}]}">

answered Sep 17 '15 at 15:49

BroiSatse

44,031
8
61
86

score 0 · Answer 6 · answered Sep 17 '15 at 15:51

0

Please read the reference below

For filter single value in AngularJs

http://toddmotto.com/everything-about-custom-filters-in-angular-js/

I hope it can help you

answered Sep 17 '15 at 15:51

Santhakumar Munuswamy

548
5
18

Angular JS filter on single value

6 Answers6