AngularJs - 以相同名称的ng-repeat访问范围变量

Posted 2021-04-14

尝试访问具有相同名称的ng-repeat中的控制器变量。例如

调节器

$scope.items = [1,2,3,4,5];

$scope.a = {
  data: "Some Data"
};

视图

<div ng-repeat="a in items"> {{ a }} - {{ $parent.a.data }} </div>

但它不起作用。是否可以访问具有相同名称的ng-repeat内的变量（Object）？

答案

实现它的一种方法是通过命名控制器来访问变量（例如here in doc）。

您可以将控制器命名为ng-controller="TestCtrl as ctrl"

然后，您需要在视图中进行一些更改：

<div ng-repeat="a in ctrl.items"> {{ a }} - {{ ctrl.a.data }} </div>

在你的控制器中：

app.controller('TestCtrl', function($scope) {
    var self = this;
    self.items = [1,2,3,4,5]; //brackets here, not curly brackets as said by @georgeawg 
    self.a = {
        data: "Some Data"
    };

    // Rest of you code
});

最后，命名控制器是一个很好的做法。

希望能帮助到你 ！

另一答案

如果您打算将$scope.items作为数组，请使用方括号，而不是大括号。

//Do THIS
$scope.items = [1,2,3,4,5];
//NOT THIS
$scope.items = {1,2,3,4,5};

你的ng-repeat迭代器可以是任何东西。不需要重载父范围变量。

<div ng-repeat="anything in items"> {{ anything }} - {{ a.data }} </div>

此外，如果父变量未重载，则无需使用$parent。

ng-repeat重复的元素中的变量原型继承自父范围。有关更多信息，请参阅What are the nuances of scope prototypal / prototypical inheritance in AngularJS?