Question

我正在使用Angular.js构建应用程序。在这个应用程序中，我通过AJAX以JSON格式获取一些数据。我在表格中列出了这些数据，并输入了一个搜索文本输入来过滤它。

我用这种方式实现了过滤器：

[...]
<input ng-model="searchText"/>
[...]
<tr ng-repeat="data in datarray | filter:searchText">
<td>{{data.title}}<td>
<td>{{data.message}}<td>
<tr>
[...]

我想要（并且不知道如何）只为某些字段（例如其标题）过滤此数据。

例如：如果我有data[0]标题＆＃34;猫＆＃34;和消息＆＃34;猫和狗＆＃34;和data[1]标题为＆＃34;狗＆＃34;和消息＆＃34;猫和狗＆＃34;，我搜索＆＃34;猫＆＃34;，我只想显示data[0]，而不考虑数据消息，只考虑标题。

Answer 1

正如文档https://docs.angularjs.org/api/ng/filter/filter

中所提供的那样

你应该正确设置你的ng模型：

<input ng-model="search.title" />

您还可以组合搜索列：

<input ng-model="search.title" />
<input ng-model="search.message" />

并在您的过滤器中：

<tr ng-repeat="data in datarray | filter:search">
  <td>{{data.title}}<td>
  <td>{{data.message}}<td>
<tr>

以下是演示：http://plnkr.co/edit/LCWV35PvbU7rLQvgqiOw?p=preview

Answer 2

我正在修改@igloob的相同代码，这适用于过滤所有/任何列......

<!DOCTYPE html>
<html ng-app="filterExample">

<head>
<script data-require="angular.js@1.4.8" data-semver="1.4.8" src="https://code.angularjs.org/1.4.8/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>

<body ng-controller="FilterController as filterCtrl">    

<input ng-model="search" />
<table>
  <tbody>
    <tr ng-repeat="item in filterCtrl.data | filter:search">
      <td>{{item.title}}</td>
      <td>{{item.message}}</td>
    </tr>
  </tbody>
</table>

<script>
  var filterModule = angular.module ("filterExample", []);

  filterModule.controller ("FilterController", function () {
  this.data = [{title:"abc", message:"def"}, {title:"aef", message:"jkl"},
  {title:"efg", message:"asc"}];

});
</script>
</body>

</html>

使用ng-repeat按列过滤表格

2 个答案: