Angular JS，带有选择框的过滤表答案

【问题标题】：Angular JS, filter table with a select boxAngular JS，带有选择框的过滤表
【发布时间】：2013-05-20 04:03:23
【问题描述】：

我有一张桌子。我想根据在选择框中选择的值来过滤表格。比较值是选择框中的 {{pipe.pipe_id}} 和表中的 {{dimension.pipe_id}}。猜猜有一个简单的解决方案吗？有什么建议吗？

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-options。 docs.angularjs.org/api/ng/directive/select

标签： angularjs angularjs-ng-repeat angularjs-filter

【解决方案1】：

我建议使用ng-filter。

此链接是一个使用待办事项列表的简单示例。 jsfiddle using ng-filter

您需要将您正在使用的任何输入与ng-model="varname" 绑定

ng-filter 默认为数组中的所有字段。它可以被过滤到单个列或指向控制器中的函数。

搜索字段

<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>

【讨论】：

【解决方案2】：

我认为您正在寻找 ng-filter 和 filter 过滤器：http://docs.angularjs.org/api/ng.filter:filter

【讨论】：