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

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

      },

   ]

我使用下面的代码在 View 中呈现它们。正如您所看到的，有两个 ng-repeat block ，每种类型一个。但是我如何让 Angular 选择一个特定的类型来查看数据中的图片值呢？例如，如果图片是真正的 Angular ，则应使用图片 block 。否则就是正常的。

<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。然后我将能够将 data 中的 pic 值传递给它。但对我来说这看起来像是一个黑客。解决这种情况的最佳方法是什么？

Answer 1

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

This page提供了一个很好的说明。