Question

因此我们可以做角度

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

或

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

我想知道是否有条件创建HTML的方法，具体取决于javascript对象的属性值。我知道服务器端的模板引擎会混合使用代码和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覆盖它声明的元素？

Answer 1

我有条件地尝试使用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>

Answer 2

您可以将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>

Answer 3

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

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

ng-repeat并根据条件语句

3 个答案: