使用角度重复单个元素的嵌套对象答案

【问题标题】：Repeating the nested objects of a single element with angular使用角度重复单个元素的嵌套对象
【发布时间】：2016-08-11 06:04:09
【问题描述】：

我找到的大多数答案都是重复整个对象，这对我来说毫无问题。我需要的是在数组中显示元素的对象。这是我的控制器：

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>

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

【问题讨论】：

我无法完全理解您在这里要做什么。我用你的代码做了一个plunk，它看起来工作正常。你能解释一下吗？
结果应该如下所示：
你的性别是什么？

（男性图标）男性

（女性图标）女性

有了这两个视图，我要么只得到标题，要么只得到标题和所有答案，包括下一个问题的答案（即刻录、刺痛、..）
我仍然对您的要求感到困惑。到目前为止，我所理解的是，您不想一次显示所有问题。相反，您想一一显示问题。我说的对吗？
完全正确。我只需要展示一个问题。我将使用 onclick 指令滚动问题数组，但页面应该只显示一个问题和答案

标签： angularjs oop

【解决方案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>

【讨论】：

在这种情况下，我如何控制显示哪个问题？例如，如果我有 30 个问题，如何指定 question[0] 或 question[27]

【解决方案2】：

您可以定义一个索引，该索引将随着 ng-click 的增加而增加。

模板

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

<div class="btn btn-warning" ng-if="questionTrackIndex != 0" ng-click="previousQuestion()">Previous</div>
<div class="btn btn-warning" ng-if="question.length - 1 > questionTrackIndex" ng-click="nextQuestion()">Next</div>

控制器

$scope.questionTrackIndex = 0;

$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"}
        ]
    },
    {Id:'3', qText:'Question no 3',aCollection:[
        {text:'Answer1', 
        icon:'fa fa-fire fa-5x'},
        {text:'Answer2', 
        icon:"fa-bee.png"}
        ]
    }
  ];

$scope.nextQuestion = function() {
  $scope.questionTrackIndex++;
}

$scope.previousQuestion = function() {
  $scope.questionTrackIndex--;
}

变量$scope.questionTrackIndex 已用于滚动问题。我添加了两个按钮next 和previous 来滚动问题。点击next按钮，$scope.questionTrackIndex增加，点击previous按钮，$scope.questionTrackIndex减少。

看到这个PLUNKER

【讨论】：

【解决方案3】：

解决方案之一可能是

   <div  ng-repeat="q in question">
      <div ng-click="a($index)">{{q.qText}}</div>
    </div>
    <h1>{{answ.text}}</h1>
    <div ng-repeat="answer in answ.answerList" class="content">
      <div class=button>
      <i class="{{answer.icon}}" aria-hidden="true"></i>
      {{answer.text}}
    </div>

你的控制器看起来像

$scope.answ = {};
$scope.answ.text = $scope.question[0].qText
$scope.answ.answerList = $scope.question[0].aCollection;
$scope.a = function(index){
   $scope.answ.text = $scope.question[index].qText
$scope.answ.answerList = $scope.question[index].aCollection;
}

你可以在link看到的例子

【讨论】：

你的性别是什么？