Question

按钮点击而不是全部加载图像集。我知道有延迟加载的插件，但只是想试试这个。

逻辑：已经在数组“Images”中拥有数据（例如30张图片）。将一个临时数组“temp”绑定到li，并在按钮单击时将“图像”中的4个图像集推送到“临时”。

当我点击按钮时，图像会闪烁并消失。我哪里错了。

<div ng-app="DemoApp" ng-controller="DemoController">
  <ul>
    <li ng-repeat="image in temp">
      <img ng-src="{{image.src}}" />
    </li>
  </ul>
  <button class="btn btn-default" ng-click="loadMore()">LOAD MORE</button>
</div>
<script type="text/javascript">
        var DemoApp = angular.module("DemoApp", []);
        DemoApp.controller("DemoController",
              function DemoController($scope) {
                  $scope.quantity = 0;
                  $scope.temp = [];
                  $scope.loadMore = function () {
                      for (i = $scope.quantity; i <= $scope.quantity + 1; i++)
                      {
                          $scope.temp.push($scope.images[i]);
                      }
                      $scope.quantity = i;
                  }

                  $scope.images = [
                      { "src": "Images/1.jpg" },
                      { "src": "Images/2.jpg" },
                      { "src": "Images/3.jpg" },
                      ......
                      { "src": "Images/4.jpg" }
                  ];
              });
    </script>

它在小提琴中工作，但不在我的页面中。

http://jsfiddle.net/6cZ48/

Answer 1

工作正常

看看这个

<强> Working Demo

 var DemoApp = angular.module("DemoApp", []);
 DemoApp.controller("DemoController",

 function DemoController($scope) {
     $scope.quantity = 0;
     $scope.temp = [];
     $scope.loadMore = function () {
         for (i = $scope.quantity; i <= $scope.quantity + 3; i++) {
             $scope.temp.push($scope.images[i]);
         }
         $scope.quantity = i + 1;
     }

     $scope.images = [{
         "src": "http://www.db4free.net/images/db4free-logo.png"
     }, {
         "src": "http://static.jsbin.com/images/github-32.png"
     }, {
         "src": "http://www.db4free.net/images/db4free-logo.png"
     }, {
         "src": "http://static.jsbin.com/images/github-32.png"
     }];
 });

点击加载图像 - 角度

1 个答案: