사용자가 반복을 클릭 할 때 각도 필터가 발생합니다.

Question

사용자가 레코드를 클릭하고 필터가 같은 리피터 내에 하나의 레코드 만 표시하도록하는 각도 필터를 만들려고합니다.

예를 들어 사람이 성 "나이트"를 검색하면 몇 가지 결과가 표시됩니다. 그런 다음 사용자가 원하는 특정 레코드를 클릭하면 리피터에 표시된 하나의 레코드 만 표시됩니다.

내 HTML은 이것이다 :

<md-list-item class="md-3-line" ng-repeat="value in ctrl.results" ng-click="ctrl.showRecord(value)"> 
    <div class="md-list-item-text" layout="column"> 
     <h4>Employee Id: <b>{{ value.employeeId }}</b></h4> 
     <h4>NetId: <b>{{ value.netId }}</b></h4> 
     <p>Name: {{ value.preferredFirstName }} {{ value.preferredLastName }}</p> 
    </div> 
</md-list-item> 

을하고이 기능에서 내 컨트롤러에 선택한 레코드를 전달 : 나는 필터의 예제 걸쳐 보았다

vm.showRecord = function (selectedRecord, ev) {    
    //need my filter here 
}; 

, 하지만 필터를 사용자가 클릭 한 것과 동일한 반복으로 업데이트하는 방법을 알 수는 없습니다.

---

** 편집은 여기에 대답, 톰 첸의 작품 ** 구문으로 컨트롤러와 함께이 일을 사람들을위한

에 따라 답을 표시합니다. HTML :

이

<md-list-item class="md-3-line" ng-repeat="value in ctrl.results | filter:ctrl.selectedId" ng-click="ctrl.showRecord(value.employeeId)"> 
<div class="md-list-item-text" layout="column"> 
<h4>Employee Id: <b>{{ value.employeeId }}</b></h4> 
<h4>NetId: <b>{{ value.netId }}</b></h4> 
<p>Name: {{ value.preferredFirstName }} {{ value.preferredLastName }}</p> 
</div> 
</md-list-item> 

컨트롤러 :

vm.showRecord = function (selectedRecord) { 
vm.selectedId = selectedRecord; 
}; 

Answer 1

당신은 사용하여이 작업을 간단하게 달성 할 수있는 NG-경우에 그것을 할 수 각도 필터 expr 이 같은 ession :

<md-list-item class="md-3-line" ng-repeat="value in ctrl.results | filter:vm.selectedId" ng-click="ctrl.showRecord(value.employeeId)"> 
    <div class="md-list-item-text" layout="column"> 
     <h4>Employee Id: <b>{{ value.employeeId }}</b></h4> 
     <h4>NetId: <b>{{ value.netId }}</b></h4> 
     <p>Name: {{ value.preferredFirstName }} {{ value.preferredLastName }}</p> 
    </div> 
</md-list-item> 

와 컨트롤러 : WORKING 예제

vm.showRecord = function (id) {    
    vm.selectedId = id; 
}; 

업데이트] 답변은 여기

는 Plunker

Answer 2

당신은

<md-list-item ng-if="!ctrl.selectedRecord || ctrl.selectedRecord === value" ng-repeat="value in ctrl.results" ng-click="ctrl.showRecord(value)"> 
    ... 
</md-list-item> 

JS가

vm.showRecord = function (selectedRecord, ev) { 
    //if the record is already selected toggel it off 
    if(vm.selectedRecord === selectedRecord) { 
     vm.selectedRecord = undefined; 
    } else { 
     vm.selectedRecord = selectedRecord 
    } 
};