基于对象与嵌套对象数组构建用户界面

Question

我想知道是否有方法建立基于对象的用户界面。

我知道的ng-repeat部分，适用于简单数组和对象包含相同类型的元素。但我想知道是否有一种方法可以构建一个包含对象和数组作为元素的对象的UI的UI。

下面是一个例子对象：

{ name: 'daMan', 
    likings: ['bicicle','running','sleeping'], 
    family: [ {name: 'Ted', type: 'son'},{name: "Marga, type:'Wife'}] 
} 

我想显示为一个表，其中具有串阵列，被输入的元素的列表，以及对象的阵列是简单的形式，其中可以输入属性名称的值。另外我想在这些数组的属性上加上一个加号按钮，这样您就可以将相同类型的元素添加到数组中。

这是否太复杂？在某种程度上，它听起来像一个JSON编辑器。

非常感谢。

Answer 1

如果你需要自己做这一切。你可以使用嵌套的ng-repeat来完成你所要求的一切。每次在对象中遇到数组时，即使嵌套，也​​可以使用ng-repeat。我创建了一个Codepen供您查看。

连接数据的范围对象中的对象的数组形式：

$scope.items = [ 
    { name: 'daMan', 
    likings: ['bicicle','running','sleeping'], 
    family: [ {name: 'Ted', type: 'son'},{name: "Marga, type:'Wife'}] 
    }, 
    { name: 'daMan', 
    likings: ['bicicle','running','sleeping'], 
    family: [ {name: 'Ted', type: 'son'},{name: "Marga, type:'Wife'}] 
    } 
]; 

每次打在你的对象的数组，你可以使用NG-重复时间：

<div ng-repeat="item in items" class="container"> 
    Username: {{item.name}} 
    <ul> 
     <li ng-repeat="liking in item.likings">{{liking}}</li> 
    </ul> 
    <table class="table table-bordered"> 
     <tr> 
     <td>Name</td> 
     <td>Type</td> 
     </tr> 
     <tbody> 
     <tr ng-repeat="member in item.family"> 
      <td>{{member.name}}</td> 
      <td>{{member.type}}</td> 
     </tr> 
     </tbody> 
    </table> 
</div>