基於對象與嵌套對象數組構建用戶界面

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>