вложенная таблица с использованием ng-repeat

То, что я пытаюсь сделать, это повторить три уровня.вложенная таблица с использованием ng-repeat

Демо: http://plnkr.co/edit/qXLcPHXDlOKZYI5jnCIp?p=preview

<table> 
    <thead> 
    <tr> 
     <td>Block</td> 
     <td>Column</td> 
     <td>Unit</td> 
     <td>Action</td> 
    </tr> 
    </thead> 
    <tbody ng-repeat="block in building.ownBlock"> 
    <tr ng-repeat="column in block.ownColumn"> 
     <td>{{block.name}}</td> 
     <td>{{column.number}}</td> 
     <td>{{unit.name}} - ? empty</td> 
     <td><button ng-click="edit(unit)">Edit</button></td> 
    </tr> 
    </tbody> 
</table>

, но я не в состоянии сделать это.

Коллекция

$scope.building = 
{ 
    id: 1, 
    name: 'first', 
    ownBlock: [ 
     { 
     id: 1, 
     name: 'Block 1', 
     ownColumn: [ 
      { 
       id: 1, 
       number: 'Column 1-1', 
       ownUnit: [ 
        { 
        id: 1, 
        number: 'Unit 1-1-1' 
        }, 
        { 
        id: 2, 
        number: 'Unit 1-1-2' 
        } 
       ] 
      }, 
      { 
       id: 2, 
       number: 'Column 1-2', 
       ownUnit: [ 
        { 
        id: 3, 
        number: 'Unit 1-2-3' 
        }, 

        { 
        id: 4, 
        number: 'Unit 1-2-4' 
        } 
       ] 
      } 
      ] 
     }, 
     { 
     id: 2, 
     name: 'Block 2', 
     ownColumn: [ 
      { 
       id: 3, 
       number: 'Column 2-3', 
       ownUnit: [ 
        { 
        id: 5, 
        number: 'Unit 2-3-5' 
        }, 
        { 
        id: 6, 
        number: 'Unit 2-3-6' 
        } 
       ] 
      }, 
      { 
       id: 4, 
       number: 'Column 2-4', 
       ownUnit: [ 
        { 
        id: 7, 
        number: 'Unit 2-4-7' 
        }, 

        { 
        id: 8, 
        number: 'Unit 2-4-8' 
        } 
       ] 
      } 
      ] 
     } 
    ] 
};

Использование KnockoutJS я мог бы использовать виртуальные повторители например.

<!-- ko foreach: items --> 
    <li data-bind="text: $data"></li> 
<!-- /ko -->

Я закодировал директиву, но «ng-click =» edit (unit) «« просто не работает. Может быть, потому что я использую element.replaceWith (html); для замены директивы HTML.

Любая помощь очень ценится. Спасибо

источник

2013-11-19 Diego Vieira

Что такое 'unit'? – tymeJV

@tymeJV это дитя ownColumn => ownUnit. –

Проблема в том, что вы пытаетесь сделать 3D-дисплей в таблице 2d. Поскольку ownUnit - это еще один массив, вы могли бы что-то вроде {{column.ownUnit [0] .number}}, но вы не можете отображать все единицы, не делая что-то другое. –

Вы можете попробовать что-то вроде этого, в зависимости от устойчивого состояния ваших моделей.

<body> 

<table> 
    <thead> 
    <tr> 
     <td>Block</td> 
     <td>Column</td> 
     <td ng-repeat="unit in building.ownBlock[0].ownColumn[0].ownUnit[0]">Unit</td> 
     <td>Action</td> 
    </tr> 
    </thead> 
    <tbody ng-repeat="block in building.ownBlock"> 
    <tr ng-repeat="column in block.ownColumn"> 
     <td>{{block.name}}</td> 
     <td>{{column.number}}</td> 
     <td ng-repeat="unit in column.ownUnit">{{unit.number}} - ? empty</td> 
     <td><button ng-click="edit(unit)">Edit</button></td> 
    </tr> 
    </tbody> 
</table> 
<pre> 
    {{toedit|json}} 
</pre>

источник

2013-11-19 03:07:59

Привет Зак, спасибо за это, но ownUnit также является массивом. Вместо этого я делаю ng-repeat на таблице. Проверьте это: http://plnkr.co/edit/ANL2h4rDXifRXHCYhNIr?p=preview –

Зак, я использовал ng-hide, чтобы возглавить заголовок, это не идеально, но выполняет эту работу, проверьте это: http: // plnkr .co/edit/b3S6HuijA6TrxgUGSJv7? p = preview –

вы хотите использовать новый нг-повторить старт и нг-повторить-концевые директивы, которые были добавлены в угловых 1.2. см. пример doco.

http://docs.angularjs.org/api/ng.directive:ngRepeat

источник

2013-11-19 04:46:08

Привет, Брет, да, я это видел, но это не сработало для моей цели, или я что-то упустил? Вот как я попытался это сделать: http://plnkr.co/edit/CGMZHjq0uGdQPDy9heR1?p=preview –

Хорошо, мне удается скрыть заголовок, чтобы предотвратить его повторение с помощью этого http://plnkr.co/ редактировать/b3S6HuijA6TrxgUGSJv7? р = предварительный просмотр –

вложенная таблица с использованием ng-repeat

ответ

Смежные вопросы