角JS，过滤表一个选择框 [英] Angular JS, filter table with a select box

问题描述

我有一个表。我想筛选取决于其价值是在选择框choosen表。比较值是{{pipe.pipe_id}}在表中的选择框，{{dimension.pipe_id}}。想有一个简单的解决方案呢？任何建议？

 管：
    ＆LT;选择ID =select01＆GT;
        ＆LT;选项NG重复=管道管道＆GT; {{管code}}  -  {{pipe.title_en}}＆LT; /选项＆GT;
    ＆LT; /选择＆GT;
    ＆LT;表类=表的表条纹＆GT;
        ＆LT;＆THEAD GT;
            ＆所述; TR＆GT;
                ＆LT;第i个管道和LT; /第i
                ＆LT;第i尺寸和LT; /第i
                ＆LT;第i个内直径小于/第i
                ＆LT;第i外直径小于/第i
            ＆LT; / TR＆GT;
        ＆LT; / THEAD＆GT;
        ＆LT;＆TBODY GT;
            ＆LT; TR NG重复=维度的尺寸＆GT;
                ＆所述; TD＆GT; {{dimension.pipe_id}}＆下; / TD＆GT;
                ＆所述; TD＆GT; {{dimension.nominalsize}}＆下; / TD＆GT;
                ＆所述; TD＆GT; {{dimension.innerdiameter}}＆下; / TD＆GT;
                ＆所述; TD＆GT; {{dimension.outerdiameter}}＆下; / TD＆GT;
            ＆LT; / TR＆GT;
        ＆LT; / TBODY＆GT;
    ＆LT; /表＆gt;
 

解决方案

我会建议使用 NG-过滤器

此链接是使用待办事项一个简单的例子。
的jsfiddle采用NG-过滤

您将需要绑定您使用的 NG-模式=VARNAME

不管输入

该纳克滤波器默认为阵列中的所有字段。它可以被过滤，以一列或点到功能在控制器

搜索字段

 ＆LT;选择NG模型=searchparam＆GT;
   ＆LT;期权价值=1＆GT;的One＆LT; /选项＆GT;
   ＆LT;期权价值=2＆GT;二＆LT; /选项＆GT;
＆LT; /选择＆GT;
 

相关搜索一列

 ＆LT;选择NG模型=searchparam.columnOne＆GT;
   ＆LT;期权价值=1＆GT;的One＆LT; /选项＆GT;
   ＆LT;期权价值=2＆GT;二＆LT; /选项＆GT;
＆LT; /选择＆GT;
 

重复栏目结果
的（过滤器模式保持不变，甚至当你输入指定特定柱）的

 ＆LT; TR NG重复=维度的尺寸|过滤器：searchparam＆GT;
     ＆所述; TD＆GT; {{dimension.columnOne}}＆下; / TD＆GT;
     ＆所述; TD＆GT; {{dimension.columnTwo}}＆下; / TD＆GT;
＆LT; / TR＆GT;
 

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