如何在第一次在angularjs中僅顯示有限的結果

Question

我是AngularJS和Ajax請求的新手。 我做了一個演示，因為我正在發出一個Ajax請求以將遠程數據並列出到列表中。 現在，我想在第一次加載頁面時首先僅顯示10個結果，然后在向下滾動列表時顯示下10個結果。

我也做了一個演示，但是每次發送不必要的HTTP請求時，列表都是無限的。 它只能發出一個HTTP請求，並顯示10個結果。 當用戶滾動獲取下一個10個結果時，它不應發出另一個請求。

這是我的代碼：

的HTML

<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">

          <link rel="stylesheet" href="mycss.css">

               <script src="angular/angular.js"></script>    
  <script src="angular/angular-touch.js"></script>  

   <script src="app.js"></script>    

    </head>

    <body>


        <div data-ng-app='demo'>
  <div data-ng-controller='MainController'>
    <ul class='hello' when-scrolled='more()'>
      <li data-ng-repeat='item in items'>
        {{item}}
      </li>
    </ul>
    <div data-ng-show='loading'>Loading</div>
  </div>
</div>
<h1>INFINITE SCROLLING IN ANGULARJS</h1>
    </body>
</html>

的JavaScript

/* 
 * To change this license header, choose License Headers in Project Properties.
 * To change this template file, choose Tools | Templates
 * and open the template in the editor.
 */
var caymanauth ='MTIzNDU2ODk6ZUVqVFpmcnRJMQ==';
app = angular.module("demo", []);
var API_HOST ='http://caymanafterwork.netcluesdemo.com/beta';
app.controller("MainController", function($scope, $http) {

  // the array which represents the list
  $scope.items = ["1. Scroll the list to load more"];
  $scope.loading = true;

  // this function fetches a random text and adds it to array
  $scope.more = function() {
    $http({
//      method: "GET",
//      url: "https://baconipsum.com/api/?type=all-meat&paras=2&start-with-lorem=1"

 method: 'POST',
            url:  API_HOST+'/webservice/listinglist',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded',
                'caymanauth': caymanauth
            },
                                  data: "&Start="+0+"&Pagesize="+6+"&SearchTxt="+''+"&FilterTxt="+''+"&FilterStarSearch="+''+"&FilterPriceSearch="+''+"&FilterLocationSearch="+''+"&FilterCuisineSearch="+''+"&FilterCategorySearch="+''+"&FkCategory=1"

    }).success(function(data, status, header, config) {
        console.log("========my response is=============",data);
      // returned data contains an array of 2 sentences
//      for (line in data) {
//        newItem = ($scope.items.length + 1) + ". " + data[line];
//        $scope.items.push(newItem);
//      }

   for (var i = 0 ; i< data['Details'].length ; i++)
            {

                      var newItem =  ($scope.items.length + 1) + ". "+data['Details'][i]['varTitle'];
           $scope.items.push(newItem); 

             $scope.loading = true;

            }
                        $scope.loading = false;


    });
  };

  // we call the function twice to populate the list
  $scope.more();
});

// we create a simple directive to modify behavior of <ul>
app.directive("whenScrolled", function() {
  return {

    restrict: 'A',
    link: function(scope, elem, attrs) {

      // we get a list of elements of size 1 and need the first element
      raw = elem[0];

      // we load more elements when scrolled past a limit
      elem.bind("scroll", function() {
        if (raw.scrollTop + raw.offsetHeight + 5 >= raw.scrollHeight) {
          scope.loading = true;

          // we can give any function which loads more elements into the list
          scope.$apply(attrs.whenScrolled);
        }
      });
    }
  }
});

Answer 1

看看ui-scroll 。

它是ngRepeat的替代品，應該可以為您提供所需的功能。

Answer 2

我們要做的是創建一個綁定到窗口滾動事件的指令，並調用作用域函數以加載數據。

或者，您可以使用http://binarymuse.github.io/ngInfiniteScroll/demo_async.html或http://aslamhadi.com/infinite-scrolling-with-angularjs/ 。

如何在第一次在angularjs中僅顯示有限的結果

問題描述

的HTML

的JavaScript

2 個解決方案

解決方案1
0 2015-10-15 09:36:51

解決方案2
0 2015-10-15 09:54:28

如何在第一次在angularjs中僅顯示有限的結果

問題描述

的HTML

的JavaScript

2 個解決方案

解決方案1 0 2015-10-15 09:36:51

解決方案2 0 2015-10-15 09:54:28

解決方案1
0 2015-10-15 09:36:51

解決方案2
0 2015-10-15 09:54:28