Question

我想知道在角度上是否有一种方法可以基于对象构建用户界面。

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

以下是一个示例对象：

myArray

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

这太复杂了吗？在某种程度上，它听起来像一个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-repeat：

<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>

使用嵌套对象数组构建基于对象的UI

1 个答案: