我可以NG-重複去一個新錶行

我有，或將有大量的數據集，代表結構化這樣的javascipt的對象的形式電影/電視節目數據：我可以NG-重複去一個新錶行

var DVDs = [ 
    { "title":"7 Assassins", 
     "image":"images/7Assassins.jpg", 
     "description":"When gold goes missing in ancient China, royal guards entrusted with its recovery realize they are not the only people in pursuit.", 
     "genre":"Action", 
     "available":"true", 
     "rating":"5", 
     "releaseYear":"2013" 
    }, 
    { "title":"Doctor Who", 
     "image":"images/DoctorWho.jpg", 
     "description":"The further adventures of the time traveling alien adventurer and his companions.", 
     "genre":"Adventure", 
     "available":"true", 
     "rating":"8", 
     "releaseYear":"2005" 
    },

我想在表格中顯示圖像。我有這個代碼工作。

<section ng-app="dvdApp" ng-controller="dvdController"> 
    <table> 
     <tr> 
      <td ng-repeat="element in products"> 
       <img src ="{{element.image}}" height=75%> 
      </td> 
     </tr> 
    </table> 
</section>

正如我所說，這工作正常，除了它只顯示在一行圖像。最終，我將在數據集中有100個或更多的DVD。我想每個表格行只顯示6個左右。所以我的問題是如何在將六個元素添加到當前表格行之後，將ng-repeat切換到新行。

編輯

我相信我已經找到了答案

how to split the ng-repeat data with three columns using bootstrap

來源

2016-02-09 Per Larsen

手柄成功它在你的數據水平。創建一個元素的主數組，每個元素包含最多六個（或任何需求）條目。然後在這個嵌套數組上做一個嵌套的ng- 這是你想要的還是其他的東西？ –

後從陣列只要採取6條爲一次，顯示所有6確保您有需要記錄的DVD不是從x。並且不要忘記使用NG-如果與$索引％6

<div ng-app="myApp" ng-controller="MyController"> 
      <table border="1" width="100%"> 
       <tr ng-repeat="x in DVDs" ng-if="$index % 6 === 0"> 
        <td> 
         {{DVDs[$index].title}} 
        </td> 

        <td> 
         {{DVDs[$index+1].title}} 
        </td> 

        <td> 
         {{DVDs[$index+2].title}} 
        </td> 

        <td> 
         {{DVDs[$index+3].title}} 
        </td> 

        <td> 
         {{DVDs[$index+4].title}} 
        </td> 

        <td> 
         {{DVDs[$index+5].title}} 
        </td> 
       </tr> 
      </table> 
    </div> 

<script> 
var app = angular.module('myApp', ['ngDragDrop']); 

app.controller('MyController', function ($scope,$http,$sce) 
{ 
    $scope.DVDs = [ 
    { 
     "title":"7 Assassins", 
     "image":"images/7Assassins.jpg", 
     "description":"When gold goes missing in ancient China, royal guards entrusted with its recovery realize they are not the only people in pursuit.", 
     "genre":"Action", 
     "available":"true", 
     "rating":"5", 
     "releaseYear":"2013" 
    }, 
    { "title":"Doctor Who", 
     "image":"images/DoctorWho.jpg", 
     "description":"The further adventures of the time traveling alien adventurer and his companions.", 
     "genre":"Adventure", 
     "available":"true", 
     "rating":"8", 
     "releaseYear":"2005" 
    }, 
    { "title":"Doctor Who", 
     "image":"images/DoctorWho.jpg", 
     "description":"The further adventures of the time traveling alien adventurer and his companions.", 
     "genre":"Adventure", 
     "available":"true", 
     "rating":"8", 
     "releaseYear":"2005" 
    }, 
    { "title":"Doctor Who", 
     "image":"images/DoctorWho.jpg", 
     "description":"The further adventures of the time traveling alien adventurer and his companions.", 
     "genre":"Adventure", 
     "available":"true", 
     "rating":"8", 
     "releaseYear":"2005" 
    }, 
    { "title":"Doctor Who", 
     "image":"images/DoctorWho.jpg", 
     "description":"The further adventures of the time traveling alien adventurer and his companions.", 
     "genre":"Adventure", 
     "available":"true", 
     "rating":"8", 
     "releaseYear":"2005" 
    }, 
    { "title":"Doctor Who", 
     "image":"images/DoctorWho.jpg", 
     "description":"The further adventures of the time traveling alien adventurer and his companions.", 
     "genre":"Adventure", 
     "available":"true", 
     "rating":"8", 
     "releaseYear":"2005" 
    }, 
    { "title":"Doctor Who", 
     "image":"images/DoctorWho.jpg", 
     "description":"The further adventures of the time traveling alien adventurer and his companions.", 
     "genre":"Adventure", 
     "available":"true", 
     "rating":"8", 
     "releaseYear":"2005" 
    }, 
    { "title":"Doctor Who", 
     "image":"images/DoctorWho.jpg", 
     "description":"The further adventures of the time traveling alien adventurer and his companions.", 
     "genre":"Adventure", 
     "available":"true", 
     "rating":"8", 
     "releaseYear":"2005" 
    }, 
    { "title":"Doctor Who", 
     "image":"images/DoctorWho.jpg", 
     "description":"The further adventures of the time traveling alien adventurer and his companions.", 
     "genre":"Adventure", 
     "available":"true", 
     "rating":"8", 
     "releaseYear":"2005" 
    }, 
    { "title":"Doctor Who", 
     "image":"images/DoctorWho.jpg", 
     "description":"The further adventures of the time traveling alien adventurer and his companions.", 
     "genre":"Adventure", 
     "available":"true", 
     "rating":"8", 
     "releaseYear":"2005" 
    } 

    ]; 
}); 

</script>

來源

2016-02-09 05:42:09

我會試試這個。我在使用ng-switch的另一篇文章中找到了類似的答案。 –

如果模塊不是opbjectionable你，我曾與ng-table

來源

2016-02-09 05:52:57 Jeremythuff

我可以NG-重複去一個新錶行

回答

相關問題