CODEWITHSUNDEEP
javascriptangularjs
CMS
CMS

Reputation: 285

Angular JS filter on single value

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.

Upvotes: 3

Views: 487

Answers (6)

Drew Gaynor
Drew Gaynor

Reputation: 8472

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>

Upvotes: 1

Index
Index

Reputation: 2381

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/

Upvotes: 0

Santhakumar Munuswamy
Santhakumar Munuswamy

Reputation: 548

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

Upvotes: 0

BroiSatse
BroiSatse

Reputation: 44715

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'}]}">

Upvotes: 0

Ali Adravi
Ali Adravi

Reputation: 22803

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

Upvotes: 0

Kashif Mustafa
Kashif Mustafa

Reputation: 1182

you add data first like

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

Upvotes: 0

Related Questions