在数组中的数组上使用 ng-repeat

Question

我正在尝试使用 ng-repeat 遍历 JSON 数组和 ingredients/directions 数组。我有什么不工作。有什么建议吗？谢谢！

控制器：

recipeControllers.controller('DetailsController', ['$scope', '$http','$routeParams',
function($scope, $http, $routeParams) {
$http.get('app/data.json').success(function(data) {
    $scope.recipe = data;
    $scope.whichItem = $routeParams.itemId;
    $scope.recipeIngredients = recipe[whichItem].ingredients;
}]);

HTML:

<div class="recipe">
    <div class="ingredients">
        <ul>
            <li ng-repeat="item in recipeIngredients">{{recipeIngredients[whichItem].ingredients}}</li>
        </ul>
     </div> 
</div>

JSON 数据：

    [
  {
    "dish":"thai_chicken_satay",
    "ingredients": ["chicken", "sauce", "stuff"],
    "directions": ["step1", "step2", "step3"]
  },

  {
    "dish":"duck_confit",
    "ingredients": ["duck", "confit", "otherstuff"],
    "directions": ["step1", "step2", "step3"]
  }

]

Answer 1

如果您正确分配 $scope.recipeIngredients（即 whichItem 已正确设置并映射到 JSON 数据中的实际对象），那么 $scope.recipeIngredients 已经指向一个成分数组（例如 ["duck", "confit", "otherstuff"]），因此要迭代您只需要做：

<li ng-repeat="item in recipeIngredients">{{item}}</li>

如果您需要遍历整个食谱数据数组，则需要嵌套 ng-repeat：

<div ng-repeat="recipe in recipes">
  <div>{{recipe.dish}}</div>
  <ul>
    <li ng-repeat="item in recipe.ingredients">{{item}}</li>
  </ul>
</div>

在数组中的数组上使用 ng-repeat

Using ng-repeat on an array within an array

javascript

arrays

json

angularjs

ng-repeat