Question

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

$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值？例如，如果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值从数据传递给它。但它看起来像是对我的黑客攻击。什么是解决这种情况的最佳方法？

Answer 1

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

This page提供了一个很好的例证。

在AngularJs中有选择地显示ng-repeat

1 个答案: