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

你有一个像@ 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

Answer 2

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

在对象数组内的数组上进行角度ng-repeat

2 个答案: