javascript - AngularJS 重复但根据条件删除嵌套部分

Question

问题:

如何使用 ng-repeat 但根据条件而不是 ng-repeat 元素本身删除 嵌套在 ng-repeat 元素中的元素？隐藏元素是不够的。它需要被删除。我不太擅长 Angular。

深度背景/我尝试过的:

我正在做一个元素，我们正在切换到 Angular。以前，它是多种不同技术的大杂烩。

有一个表单是根据来自 REST 服务的响应生成的。此服务的响应如下:

{
   "questions": [{
       "type": "multiplechoice",
       "question": "how are you?",
       "answers": [{
          "text": "bad",
          "value": 0
       }, {
          "text": "good",
          "value": 1
       }]
   }, {
       "type": "text",
       "question": "write a word"
   }, {
       "type": "date",
       "question": "pick a date"
   }]
}

根据问题类型，一些 HTML 是用 JS 编写的并附加到 DOM。由于我们的工作流程涉及可创作的解决方案，其他人可以在其中修改 HTML 而不必担心其他任何事情，因此我认为最好不要在 JS 中编写 HTML(除其他原因外)。我认为最好有一个静态 HTML 模板，该模板在运行时填充响应，但仍在页面上而没有运行服务，以便可以编写它。

<div class="multiplechoice">
    <label><input type="checkbox" value="{{question.value}}"> {{question.text}}</label>
</div>

<div class="text">
    <input type="text">
</div>

<div class="date">
    <input type="date">
</div>

这将允许某人创作 HTML 模板，因为它位于实际页面上。然后 JS 可以克隆适当的 div 并填充适当的内容，通过克隆和重复组合或仅设置一个值等。

我的问题是，在 Angular 中执行此操作的最佳方法是什么？我已经尝试了一些事情并确定了:

<li ng-repeat="question in questions" class="{{question.type}}">
    <div class="multiplechoice">
        <label ng-repeat="q in question.answers><input type="checkbox" value="{{value}}"> {{text}}</label>
    </div>
    <div class="text">
        <input type="text">
    </div>
    <div class="date">
        <input type="date">
    </div>
</li>

在 CSS 中，我可以根据类名显示/隐藏它。就像:

.date .date { display: block; }

当 ng-repeat 完成时，我最终想要结束的是在 LI 中没有放置未使用的模板/部分。所以如果是约会问题，我想:

<li><input type="date"></li>

仅此而已，这样我们就可以干净利落地遍历 DOM。

Answer 1

话虽如此，我建议您使用 ng-if 或 ng-show

但不是写

<div class='text' ng-if="question.type == 'text'">

做这样的事情:

<div class='text' ng-if="isText(question)">

然后在你的范围内:

 $scope.isText = function(question){
       if(question.type == 'text'){
           return true;
       }else{
          return false;
       }
 }

在您的 html 中更容易阅读

编辑:

但如果你有两种以上的类型，请使用 ng-switcht。

引用:

ng 开关:http://docs-angularjs-org-dev.appspot.com/api/ng.directive:ngSwitch

如果:http://docs.angularjs.org/api/ng.directive:ngIf

ng 显示:http://docs.angularjs.org/api/ng.directive:ngShow