在 AngularJs 中选择性地显示 ng-repeat答案

【问题标题】：Show ng-repeat selectively in AngularJs在 AngularJs 中选择性地显示 ng-repeat
【发布时间】：2014-10-26 10:36:23
【问题描述】：

我有如下数据。有两种类型的问题，一种以图片作为答案，另一种以选项作为答案。

$scope.data = [
     {'question': "Select one.", 'pic': false,
       'answer': [
              {"option": "8",      "correct": false},
              {"option": "14",     "correct": false},
              {"option": "1",      "correct": true},
              {"option": "23",     "correct": false} 
            ]

      },

       {'question': "Select another right answer.", 'pic': true,
       'answerPic': [
              {"option": "img/pic1.jpeg",      "correct": false},
              {"option": "img/pic2.jpeg",     "correct": false},
              {"option": "img/pic3.jpeg",      "correct": true},
              {"option": "img/pic6.jpeg",     "correct": false} 
            ]

      },

   ]

我已使用以下代码在视图中显示它们。如您所见，有两个ng-repeat 块，每种类型一个。但是如何让角度选择查看数据中的 pic 值的特定类型？例如，如果图片是真正的角度应该使用图片块。否则是正常的。

<div class="text">
  <label ng-repeat="a in question.answer">
      <input type="radio" name="answers"> 
      <div class="item-content">
            {{ a.option }}
      </div>
   </label>
</div>

<div class="picture">
  <label ng-repeat="a in question.answer">
      <input type="radio" name="answers"> 
      <div class="item-content">
            <img src="{{ a.option }}" />
      </div>
   </label>
</div>

到目前为止，我能想到的唯一选择是使用ng-show 和ng-hide。然后我将能够将pic 值从数据传递给它。但这对我来说就像一个黑客。解决这种情况的最佳方法是什么？

【问题讨论】：

ng-show 或 ng-hide 没有任何问题。您可以将它与ng-cloak 结合使用。有关更多信息，请参阅此问题：stackoverflow.com/questions/14068711/…
谢谢，弗里迪。我很好奇为什么投反对票。 :/ 如果我知道的话，也许我以后可以避免类似的问题。
不客气。顺便说一句，反对票不是来自我。

标签： javascript angularjs conditional angularjs-ng-repeat

【解决方案1】：

您可以使用ng-if 或ng-switch。与ng-show/ng-hide相比，前者实际上会从dom中删除元素，而后者只是更改display css属性。

This page 提供了很好的说明。

【讨论】：