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-18 11:08:41Z

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>

edited Sep 18, 2015 at 11:08

answered Sep 17, 2015 at 15:11

Drew Gaynor

8,4925 gold badges42 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

CMS Over a year ago

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 Over a year ago

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

Kashif Mustafa · Accepted Answer · 2015-09-17 15:23:08Z

0

you add data first like

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

edited Sep 17, 2015 at 15:23

answered Sep 17, 2015 at 15:20

Kashif Mustafa

1,1826 silver badges20 bronze badges

2 Comments

CMS Over a year ago

Also did not work I'm afraid - also this is syntactically incorrect, you are missing a "

Kashif Mustafa Over a year ago

try it now , i have changed it

Community · Accepted Answer · 2017-05-23 12:29:45Z

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, 2017 at 12:29

CommunityBot

11 silver badge

answered Sep 17, 2015 at 15:24

Ali Adravi

23k9 gold badges93 silver badges97 bronze badges

1 Comment

CMS Over a year ago

It is this bit which is not working: filter:{_id.idc : 'LH5'}

BroiSatse · Accepted Answer · 2015-09-17 15:49:49Z

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, 2015 at 15:49

BroiSatse

44.8k8 gold badges63 silver badges89 bronze badges

Comments

Santhakumar Munuswamy · Accepted Answer · 2015-09-17 15:51:22Z

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, 2015 at 15:51

Santhakumar Munuswamy

5485 silver badges18 bronze badges

Comments

Index · Accepted Answer · 2015-09-17 15:57:17Z

0

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/

edited Sep 17, 2015 at 15:57

answered Sep 17, 2015 at 15:44

Index

2,3814 gold badges33 silver badges51 bronze badges

Collectives™ on Stack Overflow

Angular JS filter on single value

6 Answers 6

2 Comments

2 Comments

1 Comment

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

2 Comments

2 Comments

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related