2013-05-24 29 views
5

Bir masam var. Seçili kutuda hangi değerin seçildiğine bağlı olarak tabloyu filtrelemek istiyorum. Karşılaştırma değeri, seçim kutusunda {{pipe.pipe_id}} ve tabloda {{dimension.pipe_id}}. Sanırım bunun için basit bir çözüm var mı? Herhangi bir öneri?Açısal JS, seçme kutulu filtre tablosu

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

Bir seçim kutusuyla, ng seçeneklerinin kullanılması en iyisidir. https://docs.angularjs.org/api/ng/directive/select – Jared

cevap

8

Ben ng-filter kullanarak öneriyoruz.

Bu bağlantı, yapılacaklar listesini kullanan basit bir örnektir. jsfiddle using ng-filter

Sen dizideki tüm alanlara ng-model="varname"

ng-filtre varsayılan kullandığınız ne olursa olsun giriş bağlamak gerekecektir. Tek bir sütuna filtrelenebilir veya kontrol cihazınızdaki bir işleve işaret edebilir.

Arama Alanı

<select ng-model="searchparam"> 
    <option value="1">One</option> 
    <option value="2">Two</option> 
</select> 

tek bir sütun

<select ng-model="searchparam.columnOne"> 
    <option value="1">One</option> 
    <option value="2">Two</option> 
</select> 
aramak

Tekrarlanan Bölüm girişinizi belirli belirtir bile
(filtre modeli aynı kalır sütun)

<tr ng-repeat="dimension in dimensions | filter: searchparam"> 
    <td>{{dimension.columnOne}}</td> 
    <td>{{dimension.columnTwo}}</td> 
</tr>