1

在 AngularJS 中，我有一组具有 atitle和 a的颜色type。我将所有颜色显示为列表。

现在我想添加一个菜单，允许用户选择只显示特定的颜色type。为此，我有另一个包含颜色类型的数组。这也显示为列表。

现在我想单击一个颜色类型以将颜色列表减少到只有那些具有选定的颜色color.type。为此，我使用了一个过滤器：

<ul>
    <li ng-repeat="color in colors | filter:search">
        {{ color.title }}
    </li>
</ul>

使用手动的颜色类型列表，一切正常： 

<ul>
    <li>
        <a href="" ng-click="search.type = 'primary';">
            Primary
        </a>
    </li>               
</ul>

但是，当我使用如上所述的颜色类型数组时，单击什么也不做：

<ul>
    <li ng-repeat="colortype in colortypes">
        <a href="" ng-click="search.type = '{{ colortype.title }}';">
            {{ colortype.title }}
        </a>
    </li>               
</ul>

我想这与放置在 ng-repeat 中的 ng-click （或者可能是=分配的范围）有关？我该如何解决这个问题？

4

2 回答 2

3

In ngClick directive you specify not JS code, but expression.

So you can just use <a href="" ng-click="search.type = colortype.title"> and it will work (note: no interpolation by {{}})

于 2013-03-25T13:50:29.643 回答
0

由于ng-repeat创建了子范围，ng-click因此引用了子范围而不是控制器的范围。这里有两个选项来处理这个问题。

1）一种快速而肮脏的方法是使用$parent.

改变你ng-click的东西是这样的：

<a href="#" ng-click="$parent.search.type = colortype.title;">
    {{ colortype.title }}
</a>

在 JSFiddle 中查看 $parent 解决方案

如果上述模板嵌套或变为嵌套，则此方法可能会失败。然后您需要使用$parent.$parent...etc访问控制器范围。

2)更好的方法是在控制器的作用域上创建一个函数，该函数返回对该作用域的引用。由于原型继承，您可以从子范围访问控制器范围功能。 

function ColorCtrl($scope) {      
    $scope.getColorCtrlScope = function() {
         return $scope;   
    }
    .....
 <a href="#" ng-click="getColorCtrlScope().search.type = colortype.title;">
     {{ colortype.title }}
 </a>

在 JSFiddle 中查看更好的解决方案

于 2014-09-25T16:32:12.590 回答