How to filter a select list in Angular JS?

Question

I see a couple of other questions like this, but their answers aren't working for me.

I have the code below which is displaying data in a table using AngularJS. I want to filter the query to only display the SecurityID numbers of 8, 9, and 10. When I add the filter as shown below I get nothing. When I remove the filter all of the securities appear. What is the easiest way to write this filter?

    <div ng-app="myApp">
        <div ng-controller="SecuritiesCtrl">
            Select A Forex Pair:
            <select ng-model="SecuritiesModel" ng-options="x.SecurityID as x.TrueSymbol for x in Securities | filter:{ SecurityID: 8,9,10 }" ng-change="GetQuotes();" ng-bind="date | date:'MM/dd/yyyy'"></select><br />

         <table id="QuotesTable" class="MyTable" style="display:none;">
              <tr>
                <th class="MyTable">Time</th>
                <th class="MyTable">Open</th>
                <th class="MyTable">Hi</th>
                <th class="MyTable">Lo</th>
                <th class="MyTable">Close</th>
              </tr>
              <tr ng-repeat="x in Quotes">
                <td class="MyTable">{{ x.QuoteTime }}</td>
                <td class="MyTable">{{ x.Open }}</td>
                <td class="MyTable">{{ x.Hi }}</td>
                <td class="MyTable">{{ x.Lo }}</td>
                <td class="MyTable">{{ x.Close }}</td>
              </tr>
            </table>
        </div>
    </div>

u should use custom filter for this.

Hadi
– Hadi

2016-04-15 13:33:20 +00:00
Commented Apr 15, 2016 at 13:33 — Hadi
– Hadi, Commented Apr 15, 2016 at 13:33

Community · Accepted Answer · 2017-05-23 10:28:35Z

1

For a filter on several values, I recommend you to create a controller function to filter.

$scope.interestingSecurityIds = [8, 9, 10];

$scope.filterBySecurityId = function(security) {
    return ($scope.interestingSecurityIds.indexOf(security.SecurityID) !== -1);
};

With this filter in your view :

<select ng-model="SecuritiesModel" ng-options="x.SecurityID as x.TrueSymbol for x in Securities | filter: filterBySecurityId" ng-change="GetQuotes();" ng-bind="date | date:'MM/dd/yyyy'"></select>

JSFiddle mockup here.

You can also refer to this answer.

edited May 23, 2017 at 10:28

CommunityBot

11 silver badge

answered Apr 15, 2016 at 13:35

bviale

5,3933 gold badges30 silver badges48 bronze badges

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

9 Comments

Steve Gaines Over a year ago

Thanks for the reply, but I can't get this to work either. I don't know why. I tried putting a breakpoint in the filterBySecurityId function, but it never hits in Developer Tools.

bviale Over a year ago

@SteveGaines There is no error in the console logs ?

Arun Over a year ago

I think he missed calling function name. Use like this filter: filterBySecurityId()

Steve Gaines Over a year ago

@bivale - It looks like there is an error in console logs. I'm pretty new to using Developer Tools. Here's what it says (in part): Error: options is undefined writeNgOptionsValue@stevegaines.us/Scripts/angular.js:27783:15

bviale Over a year ago

@ArunShinde Nope you should not use paranthesis : docs.angularjs.org/api/ng/filter/filter

|

Collectives™ on Stack Overflow

How to filter a select list in Angular JS?

1 Answer 1

9 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related