角JS,过滤表一个选择框 [英] Angular JS, filter table with a select box
问题描述
我有一个表。我想筛选取决于其价值是在选择框choosen表。比较值是{{pipe.pipe_id}}在表中的选择框,{{dimension.pipe_id}}。想有一个简单的解决方案呢?任何建议?
管:
<选择ID =select01>
<选项NG重复=管道管道> {{管code}} - {{pipe.title_en}}< /选项>
< /选择>
<表类=表的表条纹>
<&THEAD GT;
&所述; TR>
<第i个管道和LT; /第i
<第i尺寸和LT; /第i
<第i个内直径小于/第i
<第i外直径小于/第i
< / TR>
< / THEAD>
<&TBODY GT;
< TR NG重复=维度的尺寸>
&所述; TD> {{dimension.pipe_id}}&下; / TD>
&所述; TD> {{dimension.nominalsize}}&下; / TD>
&所述; TD> {{dimension.innerdiameter}}&下; / TD>
&所述; TD> {{dimension.outerdiameter}}&下; / TD>
< / TR>
< / TBODY>
< /表>
我会建议使用 NG-过滤器
此链接是使用待办事项一个简单的例子。
的jsfiddle采用NG-过滤
您将需要绑定您使用的 NG-模式=VARNAME
该纳克滤波器默认为阵列中的所有字段。它可以被过滤,以一列或点到功能在控制器
搜索字段
<选择NG模型=searchparam>
<期权价值=1>的One< /选项>
<期权价值=2>二< /选项>
< /选择>
相关搜索一列
<选择NG模型=searchparam.columnOne>
<期权价值=1>的One< /选项>
<期权价值=2>二< /选项>
< /选择>
重复栏目结果
的(过滤器模式保持不变,甚至当你输入指定特定柱)的
< TR NG重复=维度的尺寸|过滤器:searchparam>
&所述; TD> {{dimension.columnOne}}&下; / TD>
&所述; TD> {{dimension.columnTwo}}&下; / TD>
< / TR>
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>
I would recommend using the ng-filter.
This link is a simple example using a to-do list. jsfiddle using ng-filter
You will need to bind whatever input you are using with ng-model="varname"
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.
Search Field
<select ng-model="searchparam">
<option value="1">One</option>
<option value="2">Two</option>
</select>
To Search a single column
<select ng-model="searchparam.columnOne">
<option value="1">One</option>
<option value="2">Two</option>
</select>
Repeated Section
(the filter model stays the same even when your input specifies a specific column)
<tr ng-repeat="dimension in dimensions | filter: searchparam">
<td>{{dimension.columnOne}}</td>
<td>{{dimension.columnTwo}}</td>
</tr>
这篇关于角JS,过滤表一个选择框的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!