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

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

2 个答案: