2013-05-24 3 views
5

У меня есть стол. Я хочу отфильтровать таблицу в зависимости от того, какое значение выбрано в поле выбора. Значение сравнения {{pipe.pipe_id}} в поле выбора и {{dimension.pipe_id}} в таблице. Угадайте, есть ли простое решение для этого? Любое предложение?Угловой JS, таблица фильтров с полем выбора

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

С помощью блока выбора лучше всего использовать ng-options. https://docs.angularjs.org/api/ng/directive/select – Jared

ответ

8

Я бы рекомендовал использовать в ng-filter.

Эта ссылка является простым примером, используя список дел. jsfiddle using ng-filter

Вам нужно будет связать любой вход используется с ng-model="varname"

The нг-фильтра по умолчанию для всех полей в массиве. Его можно фильтровать в один столбец или указывать на функцию в вашем контроллере.

Поле поиска

<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> 
Смежные вопросы