Question

我有一组具有两个文件的对象，例如：

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

现在在HTML中通过遍历数组我想为每个不同的GROUP创建一个div，并将所有元素与该组放在一起。但是我的意思是根据元素的类型创建输入或Radiobuttons或Dropdown。

现在我使用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>

第一个循环组元素，第二个将使用组中的元素

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

1 个答案: