用户单击重复时的角度过滤器结果答案

【问题标题】：Angular filter results when user clicks on repeat用户单击重复时的角度过滤器结果
【发布时间】：2016-08-19 13:40:45
【问题描述】：

我正在尝试创建一个 Angular 过滤器，它允许用户单击记录并让过滤器在同一个中继器中只显示一条记录。

例如，当一个人搜索姓氏“knight”时，他们会看到一些结果。然后，当用户点击他们想要的特定记录时，他们应该只看到一条记录显示在转发器中。

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

我查看了一些关于过滤器的示例，但我不太了解如何使过滤器更新与用户单击的重复相同。

** 根据 Tom Chen 的工作编辑以显示答案**

对于任何使用控制器作为语法的人，这里就是答案。 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;
};

【问题讨论】：

标签： angularjs

【解决方案1】：

您可以简单地通过使用像这样的角度过滤器表达式来实现这一点：

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

在你的控制器中：

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

使用工作示例更新答案

这是Plunker中的一个例子

【讨论】：

我无法得到你的答案，所以我选择了另一个答案。
因为我确实指定了我想要一个过滤器，所以我标记了你的答案。

【解决方案2】：

你可以用 ng-if 来做到这一点

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

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

【讨论】：