使用 ng-click 过滤 ng-repeat 场景的角度变化答案

【问题标题】：angular change filtered ng-repeat scenarios with ng-click使用 ng-click 过滤 ng-repeat 场景的角度变化
【发布时间】：2017-05-20 09:31:45
【问题描述】：

我有四个过滤的场景，我希望用户能够点击。对于每种情况，我都有不同的 ng-repeat 过滤器。

<div ng-model="topic0" ng-repeat="post in postCtrl.getAllPosts() | orderBy :'-votes' ">
        <div ng-model="topic1" ng-repeat=" post in postCtrl.getAllPosts() | filter:{topicId:'1'} | orderBy :'-votes'"> ">
            <div ng-model="topic2" ng-repeat=" post in postCtrl.getAllPosts() | filter:{topicId:'2'} | orderBy :'-votes'"> ">
                <div ng-model="topic3" ng-repeat=" post in postCtrl.getAllPosts() | filter:{topicId:'3'} | orderBy :'-votes'">

这些是我的按钮：

<a class="btn-flat topic" >All</a>
<a class="btn-flat topic">Inspire</a>
<a class="btn-flat topic">Show Off</a>
<a class="btn-flat topic">Share</a>

如何设置它，以便每个过滤的 ng-repeat 场景仅在单击选项卡时触发。我该怎么做？

【问题讨论】：

你为什么不按变量过滤，那样你可以使用 ng-click 更改变量值并且列表将被更新？
刚刚尝试过，它正在工作。

标签： angularjs filtering

【解决方案1】：

<a class="btn-flat topic" ng-click="postCtrl.topicId = undefined">All</a>
    <a class="btn-flat topic" ng-click="postCtrl.topicId = 1">Inspire</a>
    <a class="btn-flat topic" ng-click="postCtrl.topicId = 2">Show Off</a>
    <a class="btn-flat topic" ng-click="postCtrl.topicId = 3">Share</a>

<div ng-model="topic0" ng-repeat="post in postCtrl.getAllPosts() | orderBy :'-votes' | filter: { topicId: postCtrl.topicId}">

【讨论】：