angularjs - 如何以角度动态添加过滤器查询？

Question

我想知道是否可以以角度动态更改过滤器查询。如果没有，还有哪些其他选择？

<a ng-repeat="topic in data.topics">
<button ng-click="topicFilter= {topic: '{{topic.label}}'">{{topic.label}}</button>
</a>

我的目标是提供一个按钮列表，这些按钮可以根据 {{topic.label}} 动态设置过滤器。

我的第一种方法如下，但是如果我的主题增加，这将是太多的代码行：

<a ng-repeat="topic in data.topics">
<button ng-click="topicFilter= {topic: 'D3'">{{topic.label}}</button>
<button ng-click="topicFilter= {topic: 'Angular'">{{topic.label}}</button>
<button ng-click="topicFilter= {topic: 'React'">{{topic.label}}</button>
<button ng-click="topicFilter= {topic: 'Redis'">{{topic.label}}</button>
</a>

Answer 1

您的第一种方法很可靠，尽管我会在按钮本身上使用中继器。另外我建议使用一个函数来使动作发生，这样将来就可以很容易地在一个地方进行更改。

<button ng-repeat="topic in data.topics"
        ng-click="setFilter('topic', topic.label);">{{topic.label}}</button>

---

$scope.setFilter = function(type, value) {
    $scope[type+'Filter'] = {};
    $scope[type+'Filter'][type] = value;
}

Answer 2

我会使用一个函数。像这样的东西：

<a ng-repeat="topic in data.topics">
  <button ng-click="topicFilter = tf(topic)">{{topic.label}}</button>
</a>

并且，在控制器中：

$scope.tf = function(topic) {
  return { topic: topic.label };
};