如何在每个列中使用Angular JS分别过滤html表格中的数据？
问题描述：
我想在下拉列表中使用一些文本框，或者在每个列标题旁边使用文本输入来在特定列中搜索ID或名称。如何在每个列中使用Angular JS分别过滤html表格中的数据？
\t <div>
\t \t <table class="table">
\t \t \t <tbody>
\t \t \t \t <tr>
\t \t \t \t \t <th>ID</th>
\t \t \t \t \t <th>Name</th>
\t \t \t \t </tr>
\t \t \t \t <tr ng-repeat="item in data">
\t \t \t \t \t <td>{{item.id}}</td>
\t \t \t \t \t <td>{{item.name}}</td>
\t \t \t \t </tr>
\t \t \t </tbody>
\t \t </table>
\t </div>
答
这很简单，你只需要添加一个输入的每个列，例如：
<table class="table">
<tbody>
<tr>
<th>
<p>ID</p>
<input ng-model="search.id" />
</th>
<th>
<p>Name</p>
<input ng-model="search.name" />
</th>
</tr>
<tr ng-repeat="item in data | filter:search">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
</tr>
</tbody>
</table>
答
像这样使用过滤器
<table class="table">
<tbody>
<tr>
<th>ID</th>
<th>Name</th>
</tr>
<tr>
<th>
<select ng-model="selectVal" >
<option value="id"> id</option>
<option value="name"> name</option>
</select>
</th>
<th><input ng-model="search[selectVal]" /></th>
</tr>
<tr ng-repeat="item in data | filter : search">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
</tr>
</tbody>
</table>
angular.module("app",[])
.controller("ctrl",function($scope){
\t $scope.data = [{id:1,name:'sss'},{id:2,name:'aaa'}];
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<div>
\t \t <table class="table">
\t \t \t <tbody>
\t \t \t \t <tr>
\t \t \t \t \t <th>ID</th>
\t \t \t \t \t <th>Name</th>
\t \t \t \t </tr>
\t \t \t \t <tr>
\t \t \t \t \t <th>
<select ng-model="selectVal" >
<option value="id"> id</option>
<option value="name"> name</option>
</select>
</th>
\t \t \t \t \t <th><input ng-model="search[selectVal]" /></th>
\t \t \t \t </tr>
\t \t \t \t <tr ng-repeat="item in data | filter : search">
\t \t \t \t \t <td>{{item.id}}</td>
\t \t \t \t \t <td>{{item.name}}</td>
\t \t \t \t </tr>
\t \t \t </tbody>
\t \t </table>
\t </div>
</div>+0
谢谢！我正在考虑通过添加一个过滤器按钮或者在每个列标题旁边下拉菜单来增强此功能，该列标题将列出每个值旁边的复选框，以便列出该列所有可能的值（我必须从后端获取）（以便我可以选择几个/所有的人，然后通过按提交按钮过滤记录。例如名称有4个列值，分别是abc，xyz，mno，abc，然后复选框应显示为abc，xyz和mno。使用复选框和过滤选择abc应该给我两个带有abc值的记录。你能给我简要介绍一下控制器吗？ – naivecoder
谢谢！我正在考虑通过添加一个过滤器按钮或者在每个列标题旁边下拉菜单来增强此功能，该列标题将列出每个值旁边的复选框，以便列出该列所有可能的值（我必须从后端获取）（以便我可以选择几个/所有的人，然后通过按提交按钮过滤记录。例如名称有4个列值，分别是abc，xyz，mno，abc，然后复选框应显示为abc，xyz和mno。使用复选框和过滤选择abc应该给我两个带有abc值的记录。你能给我简要介绍一下控制器吗？ – naivecoder
你见过[ng-table]（http://ng-table.com/#/）吗？我认为这将帮助你很多这个过滤器，分页等... –