オブジェクト配列内の配列の角度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