搜索过滤器以选择角度搜索表格

时间:2015-12-12 20:33:42

标签: html angularjs angular-filters

我需要设置搜索过滤器,当我从select标签中选择颜色时,它会向我显示颜色行?但过滤器必须仅适用于编号为1-6的列。

例如,当我选择“C”时,则显示我唯一的第2行。

我在plunker中的问题的简单版本是here

我有类似的东西(下面的代码),但它不起作用。

<table class="table table-bordered table-hover table-striped">
    <thead>
        <tr><th width="7%">Lp.</th>
            <th width="7%">Img</th>
            <th width="10%">Name</th>
            <th width="10%">Colors</th>
            <th ng-repeat="m in [] | rangeFilter:0:pyNumber" ng-class="[{'border': $index+1 == divOne }, {'border': $index+1 == divTwo }, {'border': $index+1 == divThree }]">{{$index+1}}</th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="articleItem in articleColors">
            <td>{{$index+1}}</td>
            <td>+</td>
            <td>{{ articleItem.nazwa_art }}</td>
            <td>{{ articleItem.kolory_pod }}{{ articleItem.pantony }}</td>
            <td ng-repeat="m in [] | rangeFilter:0:pyNumber" ng-class="[{'border': $index+1 == divOne }, {'border': $index+1 == divTwo }, {'border': $index+1 == divThree }]" >  
                <select id="articleColorsData" name="py{{$index+1}}" class="form-control" ng-model="articleColorsData.kolory[$index]" ng-init="articleColorsData.kolory[$index] = 'x'">
                    <option ng-repeat="oneColor in articleItem.all_colors" ng-value="x"  value="{{ oneColor }}" ng-model="search">{{ oneColor }}</option>
                </select>  
            </td>                                          
        </tr>
    </tbody>
</table>

<table class="table table-bordered table-hover table-striped">
    <thead>
        <tr>
            <th>Lp.</th>
            <th>Img</th>
            <th>Name <i class="fa fa-chevron-down"></i> </th>
            <th>Colors</th>
            <th ng-repeat="y in [] | rangeFilter:0:pyNumber " ng-class="[{'border': $index+1 == divOne }, {'border': $index+1 == divTwo }, {'border': $index+1 == divThree }]">
                {{$index+1}}
            </th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="article in articlesOfDrawings | filter : articleColorsData.kolory[$index]  track by $index" >
            <td>{{$index+1}}</td>
            <td>img</td>
            <td ng-repeat="column in article" id="{{ column[0] }}" style="background-color: rgb({{column[1]}});" ng-class="[{'border-one': $index-1 == divOne  && divOne != 0  }, {'border-two': $index-1 == divTwo && divTwo != 0 }, {'border-three': $index-1 == divThree && divThree != 0 }]" ><p>{{ column[0] }}</p></td> 
        </tr>
    </tbody>
</table>

0 个答案:

没有答案