对象数组内的数组上的角度 ng-repeat答案

【问题标题】：Angular ng-repeat on array inside an array of objects对象数组内的数组上的角度 ng-repeat
【发布时间】：2017-04-05 12:53:16
【问题描述】：

我在访问 AngularJS 中的对象数组中的数组时遇到问题。

HTML：

<li ng-repeat="ai in main.a2">
  <div np-repeat="bi in ai.b">
    <span ng-bind="bi"></span>b2
  </div>
 </li>

javascript：

var app = angular.module('app', []);
app.controller('MainCtrl', ['$scope', function($scope) {
  self.a2 = [
    {b: ['foo']},
    {b: ['bar', 'baz']},
    {b: ['boo']}
 ];
}]);

预期输出：

foob2
foobazb2
boob2

实际输出：

b2
b2
b2

这是（非工作）example。

我检查过类似的帖子，但大多数都是错误的，所以可能是我的。但是我检查了错误，所以我认为我陷入了一些陷阱。

【问题讨论】：

你打错了：np-repeat，应该是ng-repeat

标签： javascript angularjs json angularjs-ng-repeat

【解决方案1】：

<div np-repeat="bi in ai.b"> 中有一个拼写错误。改成：

<div ng-repeat="bi in ai.b">

function MyCtrl($scope) {
    $scope.a2 = [
       {b: ['foo']},
       {b: ['bar', 'baz']},
       {b: ['boo']}
    ];
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app ng-controller="MyCtrl">
   <li ng-repeat="ai in a2">
       <div ng-repeat="bi in ai.b">
         <span ng-bind="bi"></span>b2
       </div>
   </li>
</div>

【讨论】：

【解决方案2】：

您提到了@Arg0n 之类的错字。 np-repeat，应该是ng-repeat。

并且为了使其符合要求，请添加style="display:inline" 样式。

 <li ng-repeat="ai in main.a2">
    <div ng-repeat="bi in ai.b" style="display:inline">
      <span>{{bi}}</span>
    </div>b2
  </li>

Demo

【讨论】：