对象数组内的数组中的角ng-repeat

Question

我在访问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。

我查看了类似的帖子，但其中大多数都只是错误，所以可能是我的。但是我检查了错误，所以我想我陷入了一些陷阱。

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

Answer 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