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

Question

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

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

我很困惑像这样获取二维数组是否正确

Answer 1

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

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

编辑:

所以:

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

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

和:

{{x.Ingredient.name}}而不是

{{x.name}}