Question

我试图创建一个基于按钮的过滤器，但是只要我将过滤器附加到ng-repeat就不再起作用了（注意，需要过滤的对象在另一个ng-repeat中）

<!-- This works -->
<div ng-click="myFilter = {name: 'Test'}">button</div>

<!-- This does not work -->
<span ng-repeat="(key, button) in gl_categories">
    <div ng-click="myFilter = {name: 'Test'}">{{button}}</div>
</span>

Answer 1

AngularJS开发人员建议不要在模板上编写代码。模板必须像只读一样使用。

在您的情况下，问题是因为ng-repeat为每次迭代创建一个新的范围。您正在编写迭代范围。

尝试使用功能而不是手动分配。

$scope.setFilter = function(value){
  $scope.myFilter = {name: value}
}

稍后

<span ng-repeat="(key, button) in gl_categories">
    <div ng-click="setFilter('test')">{{button}}</div>
</span>

Answer 2

因为ngRepeat创建了自己的子作用域，并且每次发生单击事件时，都会在该作用域上创建另一个myFilter变量。您可以使用一个对象，然后设置对象属性（这将冒泡）

<div ng-click="x.myFilter = {name: 'Test'}">button</div>

<span ng-repeat="(key, button) in gl_categories">
    <div ng-click="x.myFilter = {name: 'Test'}">{{button}}</div>
</span>

我建议您阅读以下帖子，以获得精彩的解释：What are the nuances of scope prototypal / prototypical inheritance in AngularJS?

为什么过滤器在另一个重复重复内部时无法正常工作

2 个答案: