用ng-repeat过滤表格 [英] Filtering a table by column with ng-repeat

问题描述

我正在使用Angular.js构建一个应用程序。在这个应用程序中，我通过JSON格式的AJAX获取一些数据。我将这些数据显示在一个表格中，然后我将一个搜索文本输入过滤掉。

我这样实现了过滤器：

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

我想（不知道如何） do只是针对某些字段（例如标题）过滤这些数据。例如：如果我有标题猫和消息猫和狗的数据[0] ，和 data [1] 标题为狗，并与消息猫和狗，我搜索猫，我只想要数据[0] 将被显示，而不考虑数据信息，但仅包括标题。

解决方案

在文档中： https://docs.angularjs.org/api/ng/filter/filter

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

 < input ng-model =search.title/> 
  

您也可以结合搜索栏：

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

并在您的过滤器中：

<$ p $ < code>< tr ng-repeat =data in datarray | filter：search>
< td> {{data.title}}< td>
< td> {{data.message}}< td>
< tr>

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

I'm building an application using Angular.js. In this app I'm getting some data via AJAX in JSON format. I'm showing this data listed in a table, and I put a search text input to filter it.

I implemented the filter this way:

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

What I want (and don't know how) to do is filtering this data only for certain fields (e.g. its title).

For example: if I have data[0] with title "cats" and message "cats and dogs", and data[1] titled "dogs" and with message "cats and dogs", and I search for "cats", I want only data[0] to be shown, without considering data messages but only the titles.

解决方案

As provided in the doc : https://docs.angularjs.org/api/ng/filter/filter

you should set your ng-model correctly :

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

you can also combine search columns :

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

and in your filter :

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

Here is a demo : http://plnkr.co/edit/LCWV35PvbU7rLQvgqiOw?p=preview

这篇关于用ng-repeat过滤表格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！