Question

我正在尝试使用来自API调用的数据在我的视图中显示30个配方数组。

  // app.js
  angular.module('recipeApp', [])
  .controller('RecipesCtrl', ['$scope', '$http', function ($scope, $http) {
    $scope.mainview = [];

  $http.get('/API')
    .then(function(response) {
      $scope.mainview = response.data;
    });

  // index.html
  <html lang="en" ng-app="recipeApp">
  <body ng-controller="RecipesCtrl">
  {{mainview}} //this outputs the same data shown on the API call.
               // when I try 'ng-repeat' nothing shows up at all

  // data from API call (this is just a sample of the data. there is really an array of 30 objects in "recipes")
  {
  "count": 30,
  "recipes": [
    {
      "publisher": "Closet Cooking",
      "f2f_url": "http://food2fork.com/view/35382",
      "title": "Jalapeno Popper Grilled Cheese Sandwich",
      "source_url": "http://www.closetcooking.com/2011/04/jalapeno-popper-grilled-cheese-sandwich.html",
      "recipe_id": "35382",
      "image_url": "http://static.food2fork.com/Jalapeno2BPopper2BGrilled2BCheese2BSandwich2B12B500fd186186.jpg",
      "social_rank": 100,
      "publisher_url": "http://closetcooking.com"
    },
    {
      "publisher": "The Pioneer Woman",
      "f2f_url": "http://food2fork.com/view/47024",
      "title": "Perfect Iced Coffee",
      "source_url": "http://thepioneerwoman.com/cooking/2011/06/perfect-iced-coffee/",
      "recipe_id": "47024",
      "image_url": "http://static.food2fork.com/icedcoffee5766.jpg",
      "social_rank": 100,
      "publisher_url": "http://thepioneerwoman.com"
    },

当我在html中有{{mainview}}时，它显示与上面相同，但我怎么能拥有它所以所有30个食谱在视图中循环？我查看了ng-repeat，但我对Angular很新，无法理解。任何有关此信息都将受到赞赏。

Answer 1

你可以像这样使用ng-repeat：

＆＃13;

<body ng-controller="RecipesCtrl">
    <ul>
      <li ng-repeat="recipe in mainview.recipes">{{recipe}}</li>
    </ul>
</body>

＆＃13;

它将为数组中的每个配方生成 li 元素。您可以使用访问配方的属性。就像你在javascript中一样。

{{recipe.publisher}}

注意：ng-repeat适用于任何元素，我使用ul和li仅用于显示目的。

Answer 2

这样的事可能会对你有所帮助：

<ul>
  <li ng-repeat="recipe in mainview.recipes">
    <a href="{{recipe.source_url}}">{{recipe.title}}</a>
    <br />
    - {{recipe.publisher}}
  </li>
</ul>

Answer 3

我认为您正在寻找一个视图片段，如：

<div data-ng-repeat="item in mainview.recipes">
    <div>
        <label>Publisher</label><span>{{item.publisher}}</span>
    <div>
    <div>
        <label>Title</label><span>{{item.title}}</span>
    <div>
    ...
</div>

其中...是您要在视图中显示的任何其他内容。文档位于：https://docs.angularjs.org/api/ng/directive/ngRepeat（虽然我知道你已经读过它（：）

使用Angular访问对象中的对象数组

3 个答案: