带有 ng-repeat 的 ng-click 不适用于直接表达式（不是函数）

Question

我有一个 ng-repeat 块，我正在用它编写一个 ng-click，直接表达将 $scope 变量设置为 true.. 但它不起作用.. 有人可以帮忙吗？ . 这里是 plnkr

HTML:

selected: {{selected}}
    <ul>
      <li ng-repeat="t in t.header" ng-click="selected = true;">{{t.a1}}</li>
    </ul>

JS:

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.selected = false;
  $scope.t = {
    header: [
      {
        a1:'a1'
      },
      {
        a1:'a1'
      }
    ]
  }
});

现在我有一个解决方法，可以在单击时调用函数并设置所需的变量，但很想知道另一种方法有什么问题？

Answer 1

使用 $parent 因为 ng-repeat 创建它自己的作用域

<li ng-repeat="t in t.header" ng-click="$parent.selected = true;">{{t.a1}}</li>

Plunker

Answer 2

它工作正常，但由于 ngRepeat，selected 被绑定到新范围。您可以改为将 selected 放在一个对象中，这样它就不会在子作用域上创建一个新的 selected 属性：

<li ng-repeat="t in t.header" ng-click="selectedObj.selected = true;">{{t.a1}}

$scope.selectedObj = { selected: false };

勾选这个plunker。

Answer 3

试试这个：

//$scope.selected = false;
  $scope.model = {};
  $scope.model.selected = false;

plnkr

发生的情况是，子作用域获得自己的属性，hides/shadows 父作用域属性同名。这不是 AngularJS 正在做的事情——这就是 JavaScript 原型继承的工作方式。

为了更好地理解： https://github.com/angular/angular.js/wiki/Understanding-Scopes

Answer 4

只需使用 $parent 作用域，如下所示：

<li ng-repeat="t in t.header" ng-click="$parent.selected = true;">

ng-repeat 中的每个项目都有自己的范围。

带有 ng-repeat 的 ng-click 不适用于直接表达式（不是函数）

ng-click with ng-repeat not working with direct expressions (not functions)

javascript

angularjs

angularjs-ng-repeat

angularjs-ng-click