Question

我想显示每个食谱的所有成分，我创建了一个二维数组，并推送每个食谱的每个成分的名称，在控制台中输出所有成分是没有问题的（console.log（$ scope.listOfIngredient [i] [j] .Ingredient.name）工作），但是console.log（$ scope.listOfIngredient）不起作用，这让我感到困惑，另一件事是html文件中的listOfIngredient只包含一个随机成分的配方，就像你一样看下面的图片代码，浏览器总是只能显示一个配方成分，但是console.log（$ scope.listOfIngredient）在这个listOfIngredient中没有显示任何内容。

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 recipeLength = $scope.listOfRecipe.length;

    $scope.listOfIngredient = new Array(recipeLength);

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


        var IngredientLength = response2.data.recipe.IngredientMapping.length;
        console.log(IngredientLength);

        for (var j = 0; j < IngredientLength; j++) {
          $scope.listOfIngredient[i] = new Array(IngredientLength);
        }

        for (var j = 0; j < IngredientLength; j++) {
          $scope.listOfIngredient[i][j] = response2.data.recipe.IngredientMapping[j];

          console.log($scope.listOfIngredient[i][j].Ingredient.name);
          /*  $scope.listOfIngredient[i].push(response2.data.recipe.IngredientMapping[j]); */
        }
      });
    }
    console.log($scope.listOfIngredient);
  })
});

<div ng-app="myApp" ng-controller="mainController" class="center">
  <div class="container-fluid">
    <div class="ingredientMapping2" ng-repeat="recipes in listOfIngredient track by $index ">
      <ul>{{recipes}}</ul>
      <ul>
        <li ng-repeat="x in recipes track by $index ">
          {{x.Ingredient.name}}
        </li>
      </ul>
    </div>
  </div>
</div>

Answer 1

console.log($scope.listOfIngredient);不起作用，因为它超出了您的内部$http请求。

我建议修改您的数据结构，而不是2D数组：

$scope.recipes = [
    { name: 'My Recipe',
        ingredients: [
            {name: 'Ingredient 1'},
            {name: 'Ingredient 2'}
        ]
    }
];

要列出所有食谱和每种食谱，您将使用嵌套ng-repeat：

<ul class="recipes">
    <li class="recipe" ng-repeat="recipe in recipes">
        <span class="name">{{recipe.name}}</span>
        <ul class="ingredients">
            <li class="ingredient" ng-repeat="ingredient in recipe.ingredients">
                {{ingredient.name}}
            </li>
        </ul>
    </li>  
</ul>

需要注意的另一点是，因为您在$http循环中使用了异步for(var i=0; i<recipeLength;i++){...}调用，所以在响应函数内部i的值可能不是您所期望的。为了避免这种情况，从使用索引值作为参数的函数进行$http调用将使该索引保持本地索引。

如果您使用我所说的结构，您的循环将类似于：

function loadRecipe(Recipe){
    var RecipeEntry = {
        name: Recipe.name,
        ingredients: []
    };
    $scope.recipes.push(RecipeEntry};

    $http({
        method: 'GET',
        url: url2+ Recipe.id +".json"
    }).then(function (response2) {
        RecipeEntry.ingredients = response2.data.recipe.IngredientMapping;
    });
}

function loadRecipes(){
    $http({
        method: 'GET',
        url: url
    }).then(function (response) {
        var recipes = response.data.recipes;

        $scope.recipes = [];
        for(var i=0; i < recipes.length; i++){
            loadRecipe(recipes[i].Recipe);
        }
    });
}

loadRecipes();

如何使用AngularJS在html页面中显示2d数组

1 个答案: