2016-08-19 6 views
1

ユーザーがレコードをクリックし、同じリピーター内のそのレコードのみを表示できるようにする角度フィルターを作成しようとしています。ユーザーがリピートをクリックしたときの角度フィルターの結果

たとえば、人が姓「ナイト」を検索すると、いくつかの結果が表示されます。次に、ユーザーが必要な特定のレコードをクリックすると、その1つのレコードのみがリピーターに表示されます。

enter image description here 私の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; 
}; 

答えて

1

でそれを行うことができます角度フィルタexpr

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

UPDATED ANSWERここ

は、私はあなたの答えを得ることができませんでしたPlunker

+0

例であるが、このようなession私は他の答えに行ったので、動作するように。 –

+0

私は実践的な例をプランカに追加しました –

+1

フィルタが必要だと指定したので、私はあなたの答えをマークしました。 –

0

あなたは、あなたが簡単に使用することによって、これを達成することができNG-場合

<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 
    } 
}; 
関連する問題