angularjs – Angular JS,带有选择框的过滤表

发布时间：2020-12-17 06:50:16 所属栏目：安全来源：网络整理

导读：我有一张桌子.我想根据选择框中选择的值来过滤表格.比较值为选择框中的{{pipe.pipe_id}}和表格中的{{dimension.pipe_id}}.猜猜有一个简单的解决方案吗？有什么建议吗？ Pipe: select id="select01" option ng-repeat="pipe in pipes"{{pipe.code}} - {{pipe.

我有一张桌子.我想根据选择框中选择的值来过滤表格.比较值为选择框中的{{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-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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!