angularjs - 您如何访问子控制器中的当前集合项？

Question

控制器：

var ProductsCtrl = function ($scope) {
  $scope.products = [ {name: 'one'}, {name: 'two'}, {name:'three'} ];
};

var ProductCtrl = function ($scope) {
  $scope. // How do I access the current product name?
};

看法：

<ul ng-controller='ProductsCtrl'>
  <li ng-repeat='product in products' ng-controller='ProductCtrl'>
  </li>
</ul>

Answer 1

在您的情况下，当前产品可在范围内作为“产品”访问。

如果你重复这样的事情：

ng-repeat="item in items" 您的子控制器将在范围内包含“item”。

所以在你的例子中：

<ul ng-controller='ProductsCtrl'>
  <li ng-repeat='product in products' ng-controller='ProductCtrl'>
    {{product.name}}
  </li>
</ul>

Answer 2

@ganaraj 已经提供了正确的答案。但我想指出，在您的示例中，您可能不需要在 <li> 元素中声明控制器。由 ng-repeat 为每个产品创建的子范围可以访问 ProductCtrl 控制器。你应该只需要

<li ng-repeat='product in products'>

另请参阅了解控制器组件页面上的“控制器继承示例”部分。

您可以向 ProdctsCtrl 的 $scope 添加带有产品参数的方法，然后可以在 ng-repeat 中调用该方法。例如，在您的控制器中：

var ProductsCtrl = function ($scope) {
   ...
   $scope.totalPrice = function(product) {
      return product.price * product.quantity;
   }
}

在您的 HTML 中：

<li ng-repeat='product in products'>
   total cost = {{totalPrice(product)}}
</li>