CODEWITHSUNDEEP
angularjs
Steve Gaines
Steve Gaines

Reputation: 601

How to filter a select list in Angular JS?

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>

Upvotes: 0

Views: 60

Answers (1)

bviale
bviale

Reputation: 5375

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.

Upvotes: 1

Related Questions