angularjs - 重复具有 Angular 的单个元素的嵌套对象

Question

我找到的大部分答案都是重复整个对象，这对我来说毫无问题。我需要的是在一个数组中显示一个元素的对象。这是我的 Controller :

var app = angular.module('QLoad', []);
app.controller('loadCtrl', function($scope) {
  $scope.question=[
  {Id:'1', qText:'What\'s your Gender?',aCollection:[
      {text:'Male', 
      icon:'fa fa-male fa-5x'},
      {text:'Female', 
      icon:"fa fa-female fa-5x"}
      ]
  },
  {Id:'2', qText:'What kind of Pain do you have?',aCollection:[
      {text:'Burning', 
      icon:'fa fa-fire fa-5x'},
      {text:'Stinging', 
      icon:"fa-bee.png"}
      ]
    }];

});

正如我提到的，我可以轻松地执行两个嵌套的 ng-repeats 并显示所有内容，但我只需要显示每个单独问题的答案。这就是为什么我尝试了以下两种观点，但都不起作用:

<h1>{{question[0].qText}}</h1>
<div  ng-repeat="q in question">
    <div ng-repeat="answer in q.aCollection" class="content">
      <div class=button>
      <i class="{{q[0].answer.icon}}" aria-hidden="true"></i>
      {{q[0].answer.text}}
      </div>
    </div></div>

这也行不通:

    <h1>{{question[0].qText}}</h1>
    <div ng-repeat="answer in question[0].aCollection" class="content">
              <div class=button>
              <i class="{{answer.icon}}" aria-hidden="true"></i>
              {{answer.text}}
              </div>
            </div></div>

这就是我被困的地方。我无法显示单个问题对象及其嵌套数组。感谢您的帮助。

Answer 1

您可以使用 [limitTo][1] 过滤器来实现这一点。

<div  ng-repeat="q in question | limitTo:1">
    <div ng-repeat="answer in q.aCollection" class="content">
      <div class=button>
      <i class="{{answer.icon}}" aria-hidden="true"></i>
      {{answer.text}}
      </div>
</div></div>