如何使用带有2列的角度Js创建动态行

Question

我有一个列表，我需要遍历使用角度js。我想用两列动态创建行，每列应该从列表中显示不同的元素（记录）信息。

Answer 1

您可以使用ng-repeat指令遍历list项。这意味着无论何时想要在DOM中推送元素，都要将其推送到集合listItems中，ng-repeat将会处理休息。

<table>
   <tr ng-repeat="item in listItems">
     <td>{{item.property1}}</td>
     <td>{{item.property2}}</td>
   </tr>
</table>

Answer 2

这很简单......

我创建了一个例子。

Plunker链接：Click here

注意：我为你创建了一个虚拟示例。你必须根据你的数组维护一些代码。

Answer 3

控制器中的

包含您的列表数组

vm.myList = [{key:'value', key2: 'value2'}, {key:'value', key2: 'value2'}];

html 中的

使用指令ng-repeat迭代数组

<table>
   <tbody>
     <th>Key</th>
     <th>Key2</th>
   </tbdoy>
   <tr ng-repeat="item in vm.myList">
       <td>{{item.key}}</td>
       <td>{{item.key2}}</td>
   </tr>
</table>

如果想在控制器中添加更多行，请将其推送到数组

vm.myList.push({key:'newValue', key2:'otherValue'});

Answer 4

如果你想要基于列的动力学，你应该在td元素中使用它而不是在tr元素中使用ng-repeat