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

Here is html file, I want to show 2D array from json-$scope.listOfIngredient

这是html文件,我想从json- $ scope.listOfIngredient中显示2D数组

  <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>

here is my Controller.js

这是我的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);

                    });
         }



     })

Here is my Json file http://164.132.196.117/chop_dev/recipe/recipes/view/id.json

这是我的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,

I got confused if it is correct to get 2d array like this way

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

1 个解决方案

#1

It seems as if your mapping is off. This works for me:

看起来您的映射似乎已关闭。这对我有用:

<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>

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

Edit:

so:

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

而不是

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

and:

{{x.Ingredient.name}} instead of

{{x.Ingredient.name}}代替

{{x.name}}

#1