根据对象属性在ngRepeat中创建html元素

Question

我有一个对象数组，它有两个文件，例如：

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

现在，在HTML中，通过遍历数组，我想为每个不同的GROUP创建一个div，并将该组的所有元素放在里面。但我的意思是根据元素的类型创建输入、单选按钮或下拉菜单。

现在我已经使用AngularJS完成了这项工作，主要是通过将对象附加到现有对象上等方式使用JS。但我想尽可能减少JS的使用，因为我在加载HTML后调用函数时遇到了问题（加载HTML后再调用函数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>

第一个循环将元素分组，第二个循环将处理组中的元素