AngularJS - 如何使用ng-repeat訪問對象內部的數組屬性

Question

我正在嘗試學習AngularJS，並且遇到了ng-重複可能的數據結構的問題。

這裏的情況是：

我有表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中時，一個'空單元'將被推入到每個列數據數組中。當我用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更新每當在表1中進行更改。

我發現你可以做ng-repeat =（key ，價值）的數據，但我認爲這不適用於這種情況？任何幫助都將非常感激，我一直堅持這一個星期。

如果我需要更多地說明我的問題，請告訴我！編號：Here is the fiddle。我應該先做這件事。縮短我的問題很多

Answer 1

我們必須控制類似於您在我們的project.Here正在做的事情是我們做什麼：

有同時代表結構和表的數據對象：

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

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

iee列對象數組和行數組，這些數組是行數組

現在，我們不會同時編輯定義和數據，但基本上你想要做的是有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> 

雖然定義編輯將幾乎完全做你在做什麼，並在addi重刑改變列，它會發出事件：

• 添加列$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) 
    }) 
})