Question

我正在构建一个带离子的应用程序，并且在尝试遍历数组中的数组并将其打印到无序的HTML列表时，只是遇到了ng-repeat指令的问题。它只是将所有内容放在[]方括号内，并将其放入li

中

我觉得我只是缺少一些基本的东西。我可以通过在调用结束时[2]来定位数组中的字符串，但这不是重点。希望能够运行for循环并将数组中的5个字符串值分别打印到<li>。

javascript中定义的控制器：

tfdisplays.controller('ReptilesController', ['$scope', '$http',
    function($scope, $http) {
        $http.get('js/reptileData.json').success(function(data) {
            $scope.reptiles = data.reptiles;
        });
}]);

JSON代码的简化版本：

{
  "reptiles": [
    {
      "name": "Blue Tongue Lizard",
      "classname": "blue-tongue",
      "scientific_name": "Tiliqua scincoides",
      "featured_image": "blue-tongue",
      "description": "<p>Blue-tongue lizards (Tiliqua scincoides) are large skinks with short limbs (legs) that can grow to 50 centimetres in length. Blue tongue lizards are diurnal, being most active during the morning and afternoon.</p><p>They are found through most of coastal Queensland, and have adapted well to living in people’s backyards where they can find shelter away from predators.</p><p>Blue-tongues are usually solitary animals. 3-5 months after mating, females give birth to up to 20 live young (viviparous) in summer. The young emerge fully independent.</p><p>When annoyed, they will hiss, inflate their body and open their mouth to expose their brightly coloured tongue. They have strong jaws which can deliver a painful bite, although bites are rare.</p>",
      "adaptions": [
        "Excellent camouflage","A combination of large litters and live young result in increased chances of survival for offspring","Powerful jaws to crush snail shells and seeds with hard casings","Ability to ‘drop’ their tail to escape predation","Long-lived (up to 20 years)"
      ],
      "facts": "The tail of Blue-tongues is an important storage site for fat.  They can ‘drop’ their tails in an attempt to escape predators."
    }
  ]
}

我使用的HTML代码：

<div class="adaptions" ng-repeat='reptile in reptiles | limitTo: 1'>
    <h2>Adaptions</h2>
    <ul>
        <li>{{ reptile.adaptions }}</li>
    </ul>
</div>

Answer 1

你应该

<div class="adaptions" ng-repeat='reptile in reptiles.reptiles | limitTo: 1'>
    <h2>Adaptions</h2>
    <ul>
       <li ng-repeat='adaption in reptile.adaptions'>{{ adaption }}</li>
    </ul>
</div>

<强>样本

var app = angular.module('todoApp', []);

app.controller("dobController", ["$scope",
  function($scope) {
    $scope.reptiles  = {
  "reptiles": [
    {
      "name": "Blue Tongue Lizard",
      "classname": "blue-tongue",
      "scientific_name": "Tiliqua scincoides",
      "featured_image": "blue-tongue",
      "description": "<p>Blue-tongue lizards (Tiliqua scincoides) are large skinks with short limbs (legs) that can grow to 50 centimetres in length. Blue tongue lizards are diurnal, being most active during the morning and afternoon.</p><p>They are found through most of coastal Queensland, and have adapted well to living in people’s backyards where they can find shelter away from predators.</p><p>Blue-tongues are usually solitary animals. 3-5 months after mating, females give birth to up to 20 live young (viviparous) in summer. The young emerge fully independent.</p><p>When annoyed, they will hiss, inflate their body and open their mouth to expose their brightly coloured tongue. They have strong jaws which can deliver a painful bite, although bites are rare.</p>",
      "adaptions": [
        "Excellent camouflage","A combination of large litters and live young result in increased chances of survival for offspring","Powerful jaws to crush snail shells and seeds with hard casings","Ability to ‘drop’ their tail to escape predation","Long-lived (up to 20 years)"
      ],
      "facts": "The tail of Blue-tongues is an important storage site for fat.  They can ‘drop’ their tails in an attempt to escape predators."
    }
  ]
};
   
  }
]);

<!DOCTYPE html>
<html ng-app="todoApp">

<head>
  <title>Sample</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
</head>
<body ng-controller="dobController">
 <div class="adaptions" ng-repeat='reptile in reptiles.reptiles | limitTo: 1'>
    <h2>Adaptions</h2>
    <ul>
       <li ng-repeat='adaption in reptile.adaptions'>{{ adaption }}</li>
    </ul>
</div>
 
</body>

</html>

Answer 2

尝试：

<ul>
    <li ng-repeat='adaption in reptile.adaptions'>{{ adaption }}</li>
</ul>

Answer 3

应该是：

   <div class="adaptions" ng-repeat='reptile in reptiles |     limitTo: 1'>
<h2>Adaptions</h2>
<ul>
    <li ng-repeat='adaptation in reptile.adaptations track by $index'>{{ adaptation }}</li>
</ul>
</div>

Answer 4

试试这个

<div class="adaptions" ng-repeat='reptile in reptiles | limitTo: 1'>
<h2>Adaptions</h2>
<ul>
    <li ng-repeat="adaption in reptile.adaptions">{{adaption}}</li>
</ul>

Answer 5

我的最终解决方案是在我的HTML中构建这样的东西：

<div class="adaptions" ng-repeat='adaptionGroup in reptiles | filter: { classname: whichReptile }'>
    <h2>Adaptions</h2>
    <ul ng-repeat='adaption in adaptionGroup.adaptions'>
        <li>{{ adaption }}</li>
    </ul>
</div>

说真的，我非常接近使用ng-bind-html ......

不能使用ng-repeat来遍历数组

5 个答案: