Angular JS,带有选择框的过滤表 [英] Angular JS, filter table with a select box
问题描述
我有一张桌子.我想根据在选择框中选择的值来过滤表.比较值在选择框中为{{pipe.pipe_id}},在表中为{{dimension.pipe_id}}.猜猜有一个简单的解决方案吗?有什么建议吗?
I have a table. I want to filter the table depending on which value is choosen in an select box. The comparison value is {{pipe.pipe_id}} in the select box and {{dimension.pipe_id}} in the table. Guess there's a simple solution for this? Any suggestion?
Pipe:
<select id="select01">
<option ng-repeat="pipe in pipes">{{pipe.code}} - {{pipe.title_en}}</option>
</select>
<table class="table table-striped">
<thead>
<tr>
<th>Pipe</th>
<th>Size</th>
<th>Inner diameter</th>
<th>Outer diameter</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="dimension in dimensions" >
<td>{{dimension.pipe_id}}</td>
<td>{{dimension.nominalsize}}</td>
<td>{{dimension.innerdiameter}}</td>
<td>{{dimension.outerdiameter}}</td>
</tr>
</tbody>
</table>
推荐答案
我建议使用 ng-过滤器.
此链接是一个使用待办事项列表的简单示例.jsfiddle 使用 ng-filter
This link is a simple example using a to-do list. jsfiddle using ng-filter
您需要使用 ng-model="varname"
ng-filter 默认为数组中的所有字段.它可以过滤到单个列或指向控制器中的函数.
The ng-filter defaults to all fields in the array. It can be filtered to a single column or point to a function in your controller.
搜索字段
<select ng-model="searchparam">
<option value="1">One</option>
<option value="2">Two</option>
</select>
搜索单列
<select ng-model="searchparam.columnOne">
<option value="1">One</option>
<option value="2">Two</option>
</select>
重复部分
(即使您的输入指定了特定列,过滤器模型也保持不变)
<tr ng-repeat="dimension in dimensions | filter: searchparam">
<td>{{dimension.columnOne}}</td>
<td>{{dimension.columnTwo}}</td>
</tr>
这篇关于Angular JS,带有选择框的过滤表的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!