实施例

Question

所以我有一些看起来像这样的代码：

<input ng-model="search" type="text">

<td ng-repeat="key in targets">
    {{ display_names[key] }}
</td>

更清楚：

targets是一个包含非人类可读ID的变量，例如key012
display_names是一个具有以下键的对象：key012: "USA"

我想过滤搜索中的display_names值？看看angularjs文档，我知道我可以过滤key，但我还没想出如何过滤display_names

实施例

以下是一个完整的例子：

 var TS = angular.module('myapp', []);

 TS.controller('test', function($scope) {
   $scope.targets = ["id_1", "id_2"];
   $scope.display_names = {
     "id_1": "USA",
     "id_2": "Mexico"
   };
 });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="myapp" ng-controller="test">
  <input ng-model="search" placeholder="Search...">

  <ul>
    <li ng-repeat="key in targets">{{display_names[key]}}</li>
  </ul>
</body>

Answer 1

<td ng-repeat="key in targets">
    <span ng-if="display_names[key].indexOf(search) > -1">{{ display_names[key] }}</span>
</td>

使用ng-if，或者您也可以使用ng-show。差异here

这样，当您在搜索中写入时（应该在$scope.search中），angular将刷新ng-repeat值以显示

如果要搜索不区分大小写的内容，可以在使用indexOf之前使用toLowerCase（）函数

display_names[key].toLowerCase().indexOf(search) > -1

Answer 2

您不能在html中使用过滤器|，因为您没有想要在要迭代的数组中过滤的值。相反，您可以使用ng-if根据搜索显示/隐藏元素。类似的东西：

<div ng-repeat="key in targets" ng-if="!search || !!display_names[key].match(search)">
  {{ display_names[key] }}
</div>

完成!!布尔强制转换，否则将为匹配返回一个新的Regex对象，触发一个摘要循环，该循环将返回另一个新对象，依此类推。

您可能还希望迭代<tr>而不是<td>，并且您需要<table>元素才能允许这些元素。

示例：http://plnkr.co/edit/qrpLKD9x4IBXowpIgnrf?p=preview

你也可以为此编写一个自定义过滤器，但它还有很多工作要做：

.filter('displayNames' function () {
  return function (key, names, search) {
    return !search || !!names[key].match(search);
  };
});

并像key in targets | displayNames:display_names:search

一样使用它

在Angular中过滤单独的变量

实施例

2 个答案: