AngularJS ng-repeat显示Json的二维数组

Question

这是html文件，我想在2D

中显示json-$scope.listOfIngredient数组

  <div class="ingredientMapping" ng-repeat="IngredientMapping in listOfIngredient track by $index">

      <ul>
        <!-- BEGIN: Inner ngRepeat. -->
        <li  ng-repeat="x in IngredientMapping.Ingredient">

            {{x.name}}

        </li>
        <!-- END: Inner ngRepeat. -->
    </ul>
      </div>

这是我的 Controller.js

var myApp = angular.module('myApp', []);

myApp.controller('mainController',function ($scope, $http) {

$scope.listOfRecipe = null;
    var url = "http://164.132.196.117/chop_dev/recipe/recipes.json";
    var url2 = "http://164.132.196.117/chop_dev/recipe/recipes/view/";
$http({
method: 'GET',
url: url

}).then(function (response) {
         $scope.listOfRecipe = response.data.recipes;

         var temp;
         for(var i=0; i<response.data.recipes.length;i++){
             $http({
                        method: 'GET',
                        url: url2+ response.data.recipes[i].Recipe.id +".json"
                    }).then(function (response2) {

                        $scope.listOfIngredient = new Array(100);
                        for (var j = 0 ;j<100;j++)
                        {
                            $scope.listOfIngredient[i] = new Array(100);
                        }
                        for (var j = 0 ;j<response2.data.recipe.IngredientMapping.length;j++)
                        {
                            $scope.listOfIngredient[i][j] = response2.data.recipe.IngredientMapping[i];
                        }

                        console.log($scope.listOfIngredient);

                    });
         }



     })

这是我的Json文件 http://164.132.196.117/chop_dev/recipe/recipes/view/id.json

here is error when I implement it and I know this error is from      $scope.listOfIngredient[i][j] = response2.data.recipe.IngredientMapping,

如果以这种方式得到2d数组是正确的，我感到很困惑

Answer 1

好像您的地图已关闭。这对我有用：

+

http://jsfiddle.net/Lvc0u55v/7841/

编辑：

所以：

<div ng-controller="MyCtrl"> <div class="ingredientMapping" ng-repeat="recipes in listOfIngredient"> <ul> <li ng-repeat="x in recipes.recipe.IngredientMapping"> {{x.Ingredient.name}} </li> </ul> </div> </div> 而不是

<li ng-repeat="x in recipes.recipe.IngredientMapping">

和：

<li ng-repeat="x in IngredientMapping.Ingredient">而不是

{{x.Ingredient.name}}