Angular NG-Repeat - Built In Filter Not working

Question

I'm developing an app using Angular 1.5.5. I'm trying to filter an array of Location objects by ID. The Locations array has 10 objects in it. The filter is returning 2 objects instead of the of the one:

Locations Array:

My html template looks like:

                        <div class="col-md-3" ng-repeat="location in offerings.Locations | filter : {'ID':event.LocationID}">
                        {{location.Name}}<br />
                        {{location.Address}}, {{location.City}}, {{location.State}} {{location.Zip}}<br />
                        Loc ID = {{location.ID}} eventLocID = {{event.LocationID}}
                    </div>

It's returning 2 results instead of the filter where 2 = 2:

I am not sure, but it looks like it filter like strings, not numbers, you have got 12, because it contains 2 — Leguest
– Leguest, Commented Apr 20, 2017 at 13:46
I think this could be some issue related to event.LocationID or its type.. can you provide a plunker/fiddle reproducing this? — tanmay
– tanmay, Commented Apr 20, 2017 at 13:50
Thanks tanmay - it looks like that is the problem. Leguest's answer below solves that issue: ng-repeat="location in offerings.Locations | filter : {'ID':event.LocationID} : true" — user1231748
– user1231748, Commented Apr 20, 2017 at 17:47

Community · Accepted Answer · 2017-05-23 11:54:31Z

2

You could try write own filter function or use that construction:

  ng-repeat="location in offerings.Locations | filter : {'ID':event.LocationID} : true"

Also check this topic Filter array of objects by attribute with integer value in ng-repeat

edited May 23, 2017 at 11:54

CommunityBot

11 silver badge

answered Apr 20, 2017 at 13:47

Leguest

2,1372 gold badges18 silver badges20 bronze badges

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

Comments

Rohìt Jíndal · Accepted Answer · 2017-04-20 14:11:46Z

DEMO

var myApp = angular.module('myApp',[]);

myApp.controller('MyCtrl', function($scope) {
    $scope.event = {"LocationID" : 2}
    $scope.locations = [
     {
     "Address": "address1",
     "city": "city1",
     "ID": 2,
     "Name": "name1",
     "State": "state1",
     "Zip": 243435
     },
     {
     "Address": "address2",
     "city": "city2",
     "ID": 3,
     "Name": "name2",
     "State": "state2",
     "Zip": 243435
     },
      {
     "Address": "address3",
     "city": "city3",
     "ID": 12,
     "Name": "name3",
     "State": "state3",
     "Zip": 243435
     }    
    ];
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
                    <div class="col-md-3" ng-repeat="location in locations | filter:{'ID' : event.LocationID}:true">
                        {{location.Name}}<br />
                        {{location.Address}}, {{location.City}}, {{location.State}} {{location.Zip}}<br />
                        Loc ID = {{location.ID}} eventLocID = {{event.LocationID}}
                    </div>
</div>

Collectives™ on Stack Overflow

Angular NG-Repeat - Built In Filter Not working

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related