嵌套NG-重複使用外NG-重複項目影響在內NG重複邏輯

我的代碼嵌套NG-重複使用外NG-重複項目影響在內NG重複邏輯

<div ng-repeat='n in [] | range:(my_works.items.length/3)+1'> 
    <div class="table-row" style="position:absolute;left:13px;{{row_gap_style(n)}}" class='ng-scope'> 
     <div class="book_container" ng-repeat='item in my_works.items.slice($index*3,($index*3+3))' style="position:absolute;top:0px;{{col_gap_style($index)}}"> 
      <div id="" title="{{ item.Story.title}}" class="cover_container fetched {{check_published(item)}}" rel="<?php echo $rel; ?>">

我想要做的就是

如果n外NG重複是0，那麼div.book_container會看起來像這樣：

<div class="book_container" ng-show="n == 0" ng-repeat='item in my_works.items.slice($index*2, ($index*2+2))' style="position:absolute;top:0px;{{col_gap_style($index+1)}}">

否則，div應該和以前一樣。

我該如何做到這一點？

來源

2014-04-24 Kim Stacks

包含兩個div元素並向兩者添加一個ng-if指令;一個包含n == 0，另一個包含n！= 0。 –

內部ng-repeat中的元素如何？理想情況下，我不必重複他們。我指的是div.cover_container等 –

您可以爲內容相同的指令，然後用NG-如果設置依賴於n的值不同的屬性：

.directive('bookContainer', function() { 
    return { 
    scope: { 
     'items': '=', 
     'colstyle': '@' 
    }, 
    restrict: 'E', 
    template: '<p ng-repeat="item in items">book: {{item}} {{colstyle}}</p>' 
    }; 
});

查看：

<div ng-repeat='n in []'> 
    <book-container ng-if='n==0' items='my_works.slice($index,1)' colstyle='s1'></book-container> 
    <book-container ng-if='n!=0' items='my_works.slice($index,2)' colstyle='s2'></book-container> 
</div>

Fiddle

該演示已大大簡化，但顯示了您可能希望使用的技術。

來源

2014-04-24 08:30:58

嵌套NG-重複使用外NG-重複項目影響在內NG重複邏輯

回答

相關問題