如何过滤Angular JS中的选择列表?

时间:2016-04-15 13:28:30

标签: angularjs

我看到了其他几个这样的问题,但他们的答案对我来说并不适用。

我有下面的代码,它使用AngularJS在表格中显示数据。我想过滤查询只显示8,9和10的SecurityID号码。当我添加如下所示的过滤器时,我什么也得不到。当我删除过滤器时,所有证券都会出现。编写此过滤器的最简单方法是什么?



    <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>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:1)

对于多个值的过滤器,我建议您创建一个要过滤的控制器功能。

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

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

在您的视图中使用此过滤器:

<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模型here

您也可以参考this answer