在ng-repeat中由ng-click调用的赋值表达式的行为

一尘不染

在ng-repeat中由ng-click调用的赋值表达式的行为

angularjs

我正在尝试使用ng-click附加到的方式更新我的模型<p>。

我有一个赋值表达式没有问题外的ng-repeat，或者与调用方法的范围内的ng-repeat。不过，如果我使用赋值里面
的ng-repeat，它似乎被忽略。我没有在Firefox控制台中看到任何消息报告，但是还没有尝试设置断点来查看是否触发了该事件。

<!DOCTYPE html>
<html>
<head>
    <title>Test of ng-click</title>
    <script type='text/javascript' src='http://code.angularjs.org/1.1.1/angular.js'></script>
    <script type='text/javascript'>//<![CDATA[

        function MyCtrl($scope) {
            $scope.selected = "";
            $scope.defaultValue = "test";
            $scope.values = ["foo", "bar", "baz"];

            $scope.doSelect = function(val) {
                $scope.selected = val;
            }
        }
        //]]>

    </script>
</head>

<body ng-app>
    <div ng-controller='MyCtrl'>
        <p>Selected = {{selected}}</p>
        <hr/>
        <p ng-click='selected = defaultValue'>Click me</p>
        <hr/>
        <p ng-repeat='value in values' ng-click='selected = value'>{{value}}</p>
        <hr/>
        <p ng-repeat='value in values' ng-click='doSelect(value)'>{{value}}</p>
    </div>
</body>
</html>

小提琴在这里，如果您愿意的话（还有几个早期的变体）。

阅读 233

2020-07-04

共1个答案

一尘不染

指令ngRepeat为每次迭代创建一个新作用域，因此您需要在父作用域中引用变量。

使用$parent.selected = value，如：

<p ng-repeat='value in values' ng-click='$parent.selected = value'>{{value}}</p>

注意：函数调用由于原型继承而传播。

如果您想了解更多信息：范围原型继承的细微之处。

2020-07-04