在Angular中过滤单独的变量

Filter separate variable in Angular

本文关键字：变量 单独 过滤 Angular      更新时间：2023-09-26

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

<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>

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

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

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

如果你想搜索它不区分大小写，你可以在使用indexOf 之前使用toLowerCase（）函数

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

不能在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 一样使用它

相关文章：