2013-05-24 4 views
5

테이블이 있습니다. 선택 상자에서 선택한 값에 따라 테이블을 필터링하고 싶습니다. 비교 값은 선택 상자의 {{pipe.pipe_id}} 및 표의 {{dimension.pipe_id}}입니다. 이것에 대한 간단한 해결책이 있다고 생각하십니까? 어떠한 제안?Angular 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"

NG 필터 기본값으로 사용하는 어떤 입력을 결합해야합니다. 단일 열로 필터링하거나 컨트롤러의 기능을 가리킬 수 있습니다.

검색 필드

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