ng-repeat 并根据条件语句呈现不同的 HTML答案

【问题标题】：ng-repeat and render different HTML as per conditional statementng-repeat 并根据条件语句呈现不同的 HTML
【发布时间】：2016-09-15 11:51:49
【问题描述】：

所以在角度我们可以做到

<tag ng-repeat="item in items">content..</tag>

或

<tag ng-repeat-start="item in items"></tag><tag ng-repeat-end></tag>

我想知道是否有一种方法可以根据 javascript 对象的属性值有条件地创建 HTML。我知道服务器端模板引擎允许混合代码和 HTML，所以我想知道是否有某种方法可以实现如下所示。

contents of someview.html

<div ng-controller="someController as ctrl">

{{foreach(ctrl.items)

{{
    if (item.type == 'textbox')
    '<input type="text" value="item.value" />'
}}

{{
    if (item.type == 'checkbox')
    '<input type="checkbox" checked="item.value" />'
}}

end-foreach}}

</div>

我以为我会只使用ng-if 语句，但它并没有削减它，因为我不希望它为每个不同的元素类型重复迭代每个对象，而且我也有一定的顺序我希望在生成的 html 元素之间保留，而不是简单地先生成所有文本框元素，然后生成所有复选框等元素。

所以

<input type="textbox" ng-if="item.type == 'textbox'" ng-repeat="item in items"/>

<input type="checkbox" ng-if="item.type == 'checkbox'" ng-repeat="item in items"/>

不会剪掉它。

我想我将不得不使用指令并用属性装饰元素。指令可以用自定义 HTML 覆盖它声明的元素吗？

【问题讨论】：

您将不得不迭代包含ng-repeat 的div 或span，或者您必须创建一个有条件地替换模板的自定义指令。您不能在同一元素上定义的 ng-repeat 和 ng-if 内联执行此任务。
@taguenizy 的问题是，如果先有文本框，然后有复选框，则第一个会打印所有文本框，然后第二个会打印所有复选框，而不是按原始顺序混合。跨度>

标签： angularjs angularjs-directive

【解决方案1】：

您可以将 ng-repeat 指令用作元素。这样您就可以将带有 ngIf 条件的标签作为其内容。

    <ng-repeat ng-repeat="item in vm.items">
        <tag ng-if="item.type == 'textbox'">   
            <input type="textbox">
        </tag>
        <tag ng-if="item.type == 'checkbox'">
            <input type="checkbox"/>
        </tag>            
    </ng-repeat>

【讨论】：

非常接近问题提案。

【解决方案2】：

有条件地尝试使用ng-include，我认为这是一种非常干净的方式：

<tag ng-repeat="item in item"><div ng-include="getTemplate(item)"></div></tag>

在你的控制器中：

$scope.getTemplate = function(item){
   if(item.type == 'textbox')
     return 'textboxTemplate.html';

   if(item.type == 'checkbox')
     return 'checkboxTemplate.html';

   //and so on...
}

然后，通过<script> 标签或$templateCache 服务声明您的脚本：

<script type="text/ng-template" id="checkboxTemplate.html">
  <input type="checkbox" ng-model="item.value"/>
</script>

【讨论】：

【解决方案3】：

您可以尝试使用“？”操作员。像这样的

<div ng-repeat="item in vm.items">
   <input type="(item.type == 'textbox') ? item.type : checkbox" checked="item.value" />
</div>

【讨论】：