Question

我正在尝试学习AngularJS，并且在使用ng-repeat可能是我的数据结构时遇到了问题。

情况如下：

我有表1，用户输入的信息包括列标题，数据类型以及是否可编辑。然后，当用户添加行时，我将数据存储在列对象中，然后将其推送到列数组

中

var column = {
    checked: $scope.checked,
    title: $scope.title,
    type: $scope.type,
    editable: $scope.editable,
    data: []
};
$scope.columns.push(column);

然后基于该表，我创建了另一个表。每个列标题都取自表1中输入的标题，用户可以向表2添加行。如果表1中有任何更改，则表2需要进行适当更新。

然而，这是我遇到麻烦的地方。我试图将表2中输入的数据存储在空数据数组的列对象中。因此，当一个新行添加到表2时，一个空单元格＆＃39;将被推入每个列数据数组。当我去展示每个细胞时使用ng-repeat，我不知道如何在列数组内访问列对象内的数组。

当我尝试添加行，并创建一个空间来存储每个表格单元格的数据时：

<tr ng-repeat="column in columns">
<td> <input type="checkbox" ng-click="getIndex($index, rows)"></input></td>
<td ng-repeat="value in column.data track by $index"> {{value}} </td>
</tr>

但它与我想要的效果相反。我希望第一个ng-repeat基于column.data 中的值，第二个基于列中的列。也许我的数据结构很差，但我无法想到另一种存储数据的方法，而表2中的表2进行更改时表2就会更新。

我发现您可以在数据中执行ng-repeat =（键，值），但我认为这不适用于这种情况？任何帮助都会非常感激，我已经坚持了一个星期。

如果我需要更多地澄清我的问题，请告诉我！

修改：Here is the fiddle。我应该先做完这件事。我的问题缩短了很多

Answer 1

我们的控制与您在项目中的操作类似。这就是我们的工作：

有一个对象代表表的结构和数据：

     var tableDescriptor = {
        definition: [{title: 'col 1', type: 'String'}, 
             {title:'col 2', type: 'Number'}],

        data: [
           [ {value: 'a stirng'}, {value: 1} ],
           [ {value: 'b stirng'}, {value: 2} ],
        ]
     }

即。列对象数组和行数组，它们是单元格数组

现在，我们不会同时编辑定义和数据，但基本上您要做的是拥有3个指令：

表包装器 - 拥有数据和定义，侦听事件

和

之类的模板

  <div>
      <definition-editor definition='descr.definition'></definition-editor>
      <data-editor data='descr.data' definition='descr.definition'></data-editor>
  </div>

定义编辑器 - 允许更改定义
数据编辑器 - 允许更改数据

数据编辑器将变得简单

 <tr>
     <th ng-repeat='column in definition'> {{ column.title }}</th>
 </tr>
 <tr ng-repeat='row in data track by $index'>
     <td>{{ $index }}</td>
     <td ng-repeat='cell in row track by $index'>
         <field data='cell' ></field>
     </td>
 </tr>

虽然定义编辑器几乎完全按照您的方式执行操作，但除了更改列之外，它还会发出事件：

添加列$scope.$emit('table-add-column', i)
删除列$scope.$emit('table-delete-column', i)

然后您将在parrent指令中收听这些事件并相应地更新正文，即

$scope.$on('table-add-column', function(ev, i) {
   _.forEach($scope.descriptor.data, function(row) {
       row.splice(i, 0, { value: ''})
   })
})

$scope.$on('table-delete-column', function(ev, i) {
   _.forEach($scope.descriptor.data, function(row) {
       row.splice(i, 1)
   })
})

AngularJS - 如何使用ng-repeat

1 个答案: