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功能只需看看我提供的示例代码。

在您的情况下，您的变种jsonArray必须由$scope.items分配或替换

这里有一个fiddle来显示一个工作示例或只是运行代码段

＆＃13;

var myApp = angular.module("example", []);

myApp.controller("exampleController", ['$scope', example]);

function example($scope)
{
    $scope.items = [
  	{
    	    title: "Title 1",
            description: "This is a description for title 1"
        },
        {
    	    title: "Title 2",
            description: "This is a description for title 2"
        },
        {
    	    title: "Title 3",
            description :" This is a description for title 3"
        }
    ];
}

＆＃13;

<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>

＆＃13;

重复＆＃34;大＆＃34; div标签并放入iformations

1 个答案: