Question

我对Angular很新，所以这个问题可能有一个简单的解决方案。我正在尝试创建一个充满图像模板的侧面板div：

ANGULAR代码：

var app = angular.module('app', []); 
        app.controller('ctrl', function ($scope) {
            $scope.thumbnails = [
                {source:'images/img1.jpg',alt:'birthday image', description:'some description'},
                {source:'images/img2.jpg',alt:'birthday image', description:'some description'},
                {source:'images/img3.jpg',alt:'birthday image', description:'some description'},
                {source:'images/img4.jpg',alt:'birthday image', description:'some description'},
                {source:'images/img5.jpg',alt:'birthday image', description:'some description'},
                {source:'images/img6.jpg',alt:'birthday image', description:'some description'}
            ];
        });

和 HTML代码：

<div class="w3-row" ng-app="" ng-controller="ctrl"  >
  <div class="w3-container w3-half" id="tiles" style="height:100%; overflow-y: scroll" >
    <h2>THUMBNAILS</h2>
    <div class="w3-container w3-third" ng-repeat="x in thumbnails">
        <div class="">
            <img class="img-thumbnail" src="{{x.source}}" alt="{{x.alt}}" style="width:100%; height:auto">
            <div class="w3-container">
              <h4>{{x.description}}</h4>
            </div>
        </div>
    </div>  
  </div>

最后，这就是页面的样子：

<div class="w3-container w3-half" id="tiles" style="height:100%; overflow-y: scroll">
    <h2>THUMBNAILS</h2>
    <!-- ngRepeat: x in thumbnails -->  
  </div>

Answer 1

修正了它！

<html ng-app="app">
  <body ng-controller="ctrl">
    <div class="w3-row">
      <div class="w3-container w3-half" id="tiles" style="height:100%; overflow-y: scroll" >
        <h2>THUMBNAILS</h2>
        <div class="w3-container w3-third" ng-repeat="x in thumbnails">
          <div class="">
            <img class="img-thumbnail" src="{{x.source}}" alt="{{x.alt}}" style="width:100%; height:auto" />
            <div class="w3-container">
              <h4>{{x.description}}</h4>
            </div>
          </div>
        </div>  
      </div>
    </div>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js" />
    <script src="script.js" />
  </body>
</html>

它基本上与您定义ng-app和ng-controller`的位置有关。

ng-repeat标签正在删除我的div

1 个答案: