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-switch：http://docs-angularjs-org-dev.appspot.com/api/ng.directive:ngSwitch

ng-if：http://docs.angularjs.org/api/ng.directive:ngIf

ng-show：http://docs.angularjs.org/api/ng.directive:ngShow

AngularJS重复但基于条件删除嵌套的部分

1 个答案: