Angular的动态可编辑网格

Question

如何呈现网格以编辑父对象的子对象并允许用户在同一视图上添加新的子对象？

如果我使用表格，如何在添加新子项时重绘表格？是否有一个控件（希望不使用jQuery）可以提供更优雅的东西？

我的对象图如下所示：

person: {
    name: 'Joe Blow',
    children: [
        {
            name: 'Mary Blow',
            gender: 'F',
            age: '18',
            hair: 'Brown',
            eyes: 'Green'
        },
        {
            name: 'Frank Blow',
            gender: 'M',
            age: '21',
            hair: 'Bald',
            eyes: 'Blue'
        }
    ]
}

视图必须有两个表单...一个用于添加新子项（基本上只是一个名称）...以及一个网格，以允许编辑每个子项的属性。

旁注：我还担心添加了这么多的孩子，这些列会缩小到无法使用的大小，或者网格变得太宽，以至于它会扭曲应用程序的左侧导航和元素。