Angular：如何使用bootstrap和ng-repeater生成圖片庫

Question

我正在學習有角度的知識，並嘗試知道如何生成類似ng-repeater的輸出的圖像庫。

演示屏幕截圖網址http://designshack.co.uk/wp-content/uploads/copypastelist-4.jpg

看到圖像，便可以了解我想要的輸出類型。

這是示例html，通過它我們可以生成圖像庫。

CSS

* {margin: 0; padding: 0;}

div {
  margin: 20px;
}

ul {
  list-style-type: none;
  width: 500px;
}

h3 {
  font: bold 20px/1.5 Helvetica, Verdana, sans-serif;
}

li img {
  float: left;
  margin: 0 15px 0 0;
}

li p {
  font: 200 12px/1.5 Georgia, Times New Roman, serif;
}

li {
  padding: 10px;
  overflow: auto;
}

li:hover {
  background: #eee;
  cursor: pointer;
}

html

<div>
  <ul>
    <li>
      <img src="http://lorempixum.com/100/100/nature/1" />
      <h3>Headline</h3>
      <p>Lorem ipsum dolor sit amet...</p>
    </li>

    <li>
      <img src="http://lorempixum.com/100/100/nature/2" />
      <h3>Headline</h3>
      <p>Lorem ipsum dolor sit amet...</p>
    </li>

    <li>
      <img src="http://lorempixum.com/100/100/nature/3" />
      <h3>Headline</h3>
      <p>Lorem ipsum dolor sit amet...</p>
    </li>

    <li>
      <img src="http://lorempixum.com/100/100/nature/4" />
      <h3>Headline</h3>
      <p>Lorem ipsum dolor sit amet...</p>
    </li>
  </ul>
</div>

取自https://designshack.net/articles/css/5-simple-and-practical-css-list-styles-you-can-copy-and-paste/的 html

每行中將有5張圖片。 現在告訴我如何使用Bootstrap CSS和Angle ng-repeater達到相同的效果。 如果可能的話，請給我一些示例代碼，在其中可以使用bootstrap和ng-repeater開發畫廊。 謝謝

編輯

假設發布示例代碼

var app=angular.module('imggallery',[]);
app.controller('imageCtrl',function($scope){
    $scope.img=[
        {headline:'Headline1',source:'images/table.jpg'},
        {headline:'Headline2',source:'images/paper.jpg'},
        {headline:'Headline3',source:'images/computer.jpg'},
        {headline:'Headline4',source:'images/ac.jpg'},
        {headline:'Headline5',source:'images/sofa.jpg'}
    ];
});


<div  ng-repeat="x in img">
     <img ng-src="{{x.source}}" >
 </div>`

假設img數組沿圖像路徑具有200個數據。 我只是不明白如何使用ng-repeat使用普通的html和css或使用引導程序僅連續顯示五個圖像。

所以尋求幫助。 謝謝

Answer 1

像這樣

 angular.module('myApp', []).controller('myCtrl', function($scope) { $scope.images = ["https://placeholdit.imgix.net/~text?txtsize=28&txt=300%C3%97300&w=300&h=300","https://placeholdit.imgix.net/~text?txtsize=28&txt=300%C3%97300&w=300&h=300","https://placeholdit.imgix.net/~text?txtsize=28&txt=300%C3%97300&w=300&h=300","https://placeholdit.imgix.net/~text?txtsize=28&txt=300%C3%97300&w=300&h=300","https://placeholdit.imgix.net/~text?txtsize=28&txt=300%C3%97300&w=300&h=300","https://placeholdit.imgix.net/~text?txtsize=28&txt=300%C3%97300&w=300&h=300","https://placeholdit.imgix.net/~text?txtsize=28&txt=300%C3%97300&w=300&h=300","https://placeholdit.imgix.net/~text?txtsize=28&txt=300%C3%97300&w=300&h=300"]; }); 

 *{ padding:0; margin:0; box-sizing:border-box; } li{ display:inline-block; width:20%; padding:10px; } li img{ width:100%; } 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app=myApp ng-controller=myCtrl> <ul> <li ng-repeat="j in images track by $index"> <img src="{{j}}" /> </li> </ul> </div> 

PS我在ng-repeat使用track by $index只是因為$scope.images有重復的值，您可以將其刪除。

Answer 2

如果要使用Bootstrap實現此目的，則可以使用ngClass來應用，每五個重復的元素，即class：

col-xs-offset-1

此類在元素的左側創建1 col的偏移量。

看起來這plunker我是如何使用的。