重複「大」的div標籤並把格局化爲

Question

我如何創建這個div而我迭代json array？

我有我會在不同的縮略圖顯示在一排，我想有這樣的一個模板不同的數據：

for(var i = 0; i < jsonArray.length; i++) 
{ 
    <div class="row"> 
     <div class="col-sm-6 col-md-4"> 
      <div class="thumbnail"> 
       <img src="somesource" alt="sometext"/> 

       <div class="caption"> 
        <h3>jsonArray[i].title</h3> 
        <p>jsonArray[i].description</p> 
       </div> 
      </div> 
     </div> 
    </div> 
} 

如果有人知道如何做到這一點和框架提供這個，請幫助我。先謝謝你！

Answer 1

您可以使用AngularJS的ng-repeat功能 只要看看我提供的示例代碼。

在你的情況，你的variabele jsonArray將不得不由$scope.items

分配或更換這裏有一個fiddle顯示工作的例子，或只是運行片段

var myApp = angular.module("example", []); 
 

 
myApp.controller("exampleController", ['$scope', example]); 
 

 
function example($scope) 
 
{ 
 
    $scope.items = [ 
 
    \t { 
 
    \t  title: "Title 1", 
 
      description: "This is a description for title 1" 
 
     }, 
 
     { 
 
    \t  title: "Title 2", 
 
      description: "This is a description for title 2" 
 
     }, 
 
     { 
 
    \t  title: "Title 3", 
 
      description :" This is a description for title 3" 
 
     } 
 
    ]; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="example"> 
 
    <div ng-controller="exampleController"> 
 
    <div class="row" ng-repeat="item in items"> 
 
     <div class="col-sm-6 col-md-4"> 
 
     <img src="#" alt="some image"/> 
 
     
 
     <div class="caption"> 
 
      <h3> 
 
      {{item.title}} 
 
      </h3> 
 
      <p> 
 
      {{item.description}} 
 
      </p> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>