ng-repeat的AngularJS嵌套指令

我試圖建立一個基於動態數據的表（列&行）。ng-repeat的AngularJS嵌套指令

目標是擁有一個可重用組件，它可以主要從模板html文件中設計。

<rows repeat = 'row in data'> 
<cell key = '"key"' value = 'row.value'></cell> 
<cell key = '"key2"' value = 'row.value2'></cell> 
</rows>

注：關鍵是靜態的名字，它應該在模板中進行設定，並沒有這個問題的一部分。

輸出應該是這樣的：在結束

<tr ng-repeat = 'row in data'> 
<td>{{row.value}}</td> 
<td>{{row.value2}}</td> 
</tr>

當然，它應該被解析（？）。

我發現，transcluding是不正確的方式去：根據這些意見，我開始了我自己的Plunker https://github.com/angular/angular.js/issues/7874#issuecomment-46410994 https://github.com/angular/angular.js/issues/7842#issuecomment-46416336

。我感覺到我正在那裏（希望），但我似乎無法讓它一起工作。

plunker

有人能指出我在正確的方向？

來源

2014-07-09 Roy Milder

這裏有一個樣本指令，將完成你想要什麼：

myApp.directive('myTable', function() { 
    return { 
    restrict: 'E', 
    templateUrl: 'MyTable.html', 
    scope: { 
     items: '=' 
    }, 
    link: function (scope) { 
     scope.keys = []; 
     for (var key in scope.items[0]) { 
     scope.keys.push(key); 
     } 
    } 
    }; 
});

您可以使用此指令是這樣的：

<my-table items="people"></my-table>

凡HTML屬性項=「<等等>」是你想組成你的桌子的對象數組。例如，我可以分配陣列

people = [{name: 'John', occupation: 'Programmer'}, 
{name: 'Jill', occupation: 'Analyst'}, 
{name: 'Jeff', occupation: 'Sales'}, 
{name: 'Joan', occupation: 'Designer'}];

到items（像我一樣在上述的例子），並且它會產生一個表，該信息。

我們正在利用我們的指令中templateUrl，該模板的HTML看起來像這樣：

<table> 
    <tr> 
    <td ng-repeat="key in keys">{{key}}</td> 
    </tr> 
    <tr ng-repeat="item in items"> 
    <td ng-repeat="value in item">{{value}}</td> 
    </tr> 
</table>

這將創建一個表是誰的第一行是列標題的列表對應的屬性名稱數組中的對象。然後它爲每個項目創建一個新行，併爲每列重複它們的值。

這裏是一個工作示例：https://docs.angularjs.org/guide/directive：http://plnkr.co/edit/Me1KtRErluEUV3T3r9iH?p=preview

爲了更好地理解如何使用指令，我建議通過對指令的文檔閱讀。

希望這會有所幫助！

來源

2014-07-09 20:43:24 pje

嗨，謝謝你的答覆。不過，我需要使用嵌套指令，其中第一個指令將引用範圍數據對象。要使用的單元格將在模板中設置，並且需要在解析後插入父指令中。單元格指令將基於其他變量動態變化。 –

@RoyMilder在我可以進一步幫助你之前，你必須給我具體的行爲，你想看看。給出一個例子，說明您希望在給定一組特定數據的情況下在屏幕上看到什麼。謝謝！ – pje

嗨！謝謝！在我的問題結尾處，你看到了那個蹲下的人嗎？我認爲這應該給你一些見解 –

隨着對AngularJS git的一些指導，我終於弄明白了。

目標

用於創建基於動態數據的表創建可重用部件。表格樣式，單元格屬性等需要在模板中完成。

解決方案

所以我們可以說我有兩組數據：

套裝1：出席人名單。該列表由「名稱」列，「年齡」列和「參加」列組成。名稱是隻讀的，將可編輯的輸入老化並參與需要成爲一組單選按鈕（是，否）。

第2組：成員列表。該列表包含「名稱」，「受邀」。名稱是隻讀的，「邀請」一組單選按鈕。

在一個模板中，顯示兩個表。唯一需要做的事情是將數據對象添加到當前作用域，並在模板中以最小標記添加表。

數據組

$scope.attending = [{name: "Roy", age: 30, attending: "Yes"}, {name: "Thomas", age: "29", attending: "No"}]; 
$scope.members = [{name: "Roy", invited: "Yes"}, {name: "Thomas", invited: "No"}, {name: "Mary", invited: "No"}, {name: "Hanna", invited: "Yes"}];

表1 /組1：

<table class='table table-bordered table-striped'> 
    <tr> 
    <th>Name</th> 
    <th>Age</th> 
    <th>Attending</th> 
    </tr> 
    <tr row rows = 'attending'> 
    <td cell type='readonly' key='name'></td> 
    <td cell type='input' key='age'></td> 
    <td cell type='radio' key='attending'></td> 
    </tr> 
</table>

表2 /組2

<table class='table table-bordered table-striped'> 
    <tr> 
    <th>Name</th> 
    <th>Gender</th> 
    </tr> 
    <tr row rows = 'members'> 
    <td cell type='readonly' key='name'></td> 
    <td cell type='radio' key='invited'></td> 
    </tr> 
</table>

整個組件可以在這裏看到： plnkr

尚未完全完成，但我到了那裏。該組件也應該與ngTable庫一起工作。

來源

2014-07-10 11:26:02

ng-repeat的AngularJS嵌套指令

回答

相關問題