Question

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

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

现在，我想点击colortype将颜色列表缩小为仅包含选定color.type的颜色。为此，我使用过滤器：

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

使用colortypes的手动列表，一切正常：

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

但是，当我使用如上所述的colortype数组时，点击什么都不做：

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

我认为这与在ng-repeat中放置ng-click（或者=赋值的范围）有关？我该如何解决这个问题？

Answer 1

在ngClick指令中，您指定的不是JS代码，而是表达式。

所以你可以使用<a href="" ng-click="search.type = colortype.title">并且它会起作用（注意：{{}}没有插值）

Answer 2

由于ng-repeat创建子范围，ng-click引用子范围而不是控制器的范围。以下是两种处理此问题的方法。

1）快速而肮脏的方法是使用$parent访问原始范围。

将您的ng-click更改为以下内容：

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

See $parent solution in JSFiddle

如果上面的模板嵌套或嵌套，这种方法可能会崩溃。然后，您需要使用$parent.$parent...等访问控制器范围。

2）更好的方法是在控制器的作用域上创建一个函数，该函数返回对作用域的引用。由于prototypal inheritance，您可以从子范围访问控制器范围函数。

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

See better solution in JSFiddle

ng-click中的ng-click

2 个答案: