Question

我正在使用一个对象数组来填充指令中的信息，但我不知道，当循环遍历该数组时，如何将数组中的每个对象插入到我的指令的“info”参数中。

基本上，HTML模板使用在info参数中传递给它的数据，如下所示：

<directive info="{{angular object}}"></directive>

当我在控制器中对单个对象进行硬编码时，我知道如何执行此操作，如下所示：

$scope.object1 = {...values here...}
$scope.object2 = {...values here...}
etc.

为此，我使用：

<directive info="object1"></directive>
<directive info="object2"></directive>

但是当我循环时，我不能这样做，因为我需要为数组中的每个对象重复该指令。

这就是我所拥有的

<div class="main" ng-controller="MainController">
  <div class="container">
     <div class="card" ng-repeat="app in apps">
      <app-info info="{{app}}"></app-info> <!--HERE IS MY PROBLEM-->
    </div>
  </div>
</div>

显然我不知道如何或将什么作为“info”参数的值。

我的主控制器如下：

 $scope.apps = [ 
  { 
    icon: 'img/move.jpg', 
    title: 'MOVE', 
    developer: 'MOVE, Inc.', 
    price: 0.99 
  }, 
   {
    icon: 'img/gameboard.jpg',
    title: 'Gameboard',
    developer: 'Armando P.',
    price: 1.99
  },
  {
    icon: 'img/forecast.jpg',
    title: 'Forecast',
    developer: 'Forecast',
    price: 1.99
  },
  { 
    icon: 'img/shutterbugg.jpg', 
    title: 'Shutterbugg', 
    developer: 'Chico Dusty', 
    price: 2.99 
  }];

结果为空，这意味着当我加载网页时，没有任何内容。

Answer 1

只需删除括号即可。你很亲密。

<div class="main" ng-controller="MainController">
  <div class="container">
     <div class="card" ng-repeat="app in apps">
      <app-info info="app"></app-info> <!--HERE IS NO PROBLEM-->
    </div>
  </div>
</div>

循环遍历Angular数组时如何将info传递给指令？

1 个答案: