Question

我尝试使用ng-repeat迭代JSON数组和成分/方向数组。我所拥有的并不起作用。有什么建议？谢谢！

控制器：

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已指向一系列成分（例如{ {1}}），所以迭代你只需要做：

["duck", "confit", "otherstuff"]

如果需要遍历整个数据数组，则需要嵌套的<li ng-repeat="item in recipeIngredients">{{item}}</li>：

ng-repeat

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

1 个答案: