創建HTML元素

Question

我有具有例如兩個的Fileds對象的數組：

var array = [{type:"range", group:"group1"}, {type:"boolean", group:"group1"}, 
{type:"input", group:"group3"}... ] 

在HTML

現在通過陣列迭代我想創建爲每個不同GROUP一個div並將該組中的所有元素放入其中。但通過放置，我的意思是根據元素的類型創建輸入或Radiobuttons或Dropdowns。

現在我已經完成了這個使用AngularJS和主要JS通過追加對象到現有的等等。但是我想盡可能地減少js的使用，因爲我在加載HTML（Call function after HTML is loaded AngularJS）後調用函數時遇到問題。

所以我會很感激，如果有人給我一個建議，這應該看起來像主要在HTML中。我想是這樣的：

<div ng-repeat="object in array track by $index"> 
    //if object.group div exists add to existing one (check maybe with js function ?) 
    // if object.type is ... add ... 
    // else if objec.type is ... add ... 
    ... 
    //else object.group not exists create div with id object.group for example 
    // if object.type is ... add ... 
    // else if object.type is ... add ... 
    ... 

Answer 1

這應該工作你的情況：

<div ng-repeat="(key, value) in array | groupBy: 'group'"> 
    Group: {{key}} 
    <div ng-repeat="object in value"> 
     <div ng-switch on="object.type"> 
     <div ng-switch-when="range">Range block</div> 
     <div ng-switch-when="boolean">Boolean block</div> 
     <div ng-switch-when="input">Input block</div> 
     </div> 
    </div> 
    <br> 
</div> 

第一循環組中的元素，第二個將與元素工作組