實現一個「加載更多」按鈕加載更多的元素時，其點擊

我希望我的li元素被隱藏，當我的狀態負載我希望只顯示前兩個元素，當我點擊一個按鈕o顯示下一兩個要素等等。實現一個「加載更多」按鈕加載更多的元素時，其點擊

這是它應該是如何工作的：

在我的角度應用程序，我展示我的li元素如下：

<ul id="myList"> 
     <li ng-repeat="offre in offres |orderBy:'-dateCreation'|filter:{etat:'true'}"> 
     <div class="box"> 
      <!-- HTML Code --> 
     </div> 
     </li> 
    </ul>

我已經li元素設置爲display:none;和JavaScript代碼示出前兩個元素如下：

<script> 

    size_li = $("#myList li").size(); 
    x=2; 
    $('#myList li:lt('+x+')').show(); 
    $('#loadMore').click(function() { 
     x= x+2; 
     $('#myList li:lt('+x+')').show(); 
    }); 

</script>

問題是，當我的狀態加載所有li元素顯示並不僅是前兩個元素，你可以在我重視它的工作原理，但是當我NG-重複使用它，它不工作的小提琴看到。

我該如何解決這個問題？

來源

2016-07-12 Ichigo Kurosaki

如你採用了棱角分明，你應該儘量避免直接以這種方式操縱DOM在可能的情況。相反，您應該利用Angular指令來控制元素的顯示方式，在這種情況下爲ng-show。

您已經存儲在$scope.offres列表。你只需要保持多少內容，以顯示曲目，只顯示它如果ng-repeat可用$index是低於該值：

angular.module('myapp', []).controller('ctrl1', function($scope) { 
 

 
    // set up the list with dummy data 
 
    $scope.offres = []; 
 
    for (var i = 0; i < 11; i++) { 
 
    $scope.offres.push(i + 1); 
 
    } 
 

 
    // set initial index 
 
    // we will use this variable to control the display - see ng-show="" in HTML 
 
    $scope.loadIndex = 2; 
 

 
    // function to increase visible items 
 
    $scope.showMore = function() { 
 
    // don't increment if at the end of the list 
 
    if ($scope.loadIndex < $scope.offres.length) { 
 
     $scope.loadIndex += 2; 
 
    } 
 
    }; 
 

 
    // function to decrease visible items 
 
    $scope.showLess = function() { 
 
    // don't decrement if at the start of the list 
 
    if ($scope.loadIndex > 2) { 
 
     $scope.loadIndex -= 2; 
 
    } 
 
    }; 
 
});

#loadMore { 
 
    color: green; 
 
    cursor: pointer; 
 
} 
 
#loadMore:hover { 
 
    color: black; 
 
} 
 
#showLess { 
 
    color: red; 
 
    cursor: pointer; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 

 
<div ng-app="myapp" ng-controller="ctrl1"> 
 
    <ul id="myList"> 
 
    <li ng-repeat="offre in offres" ng-show="$index < loadIndex">{{offre}}</li> 
 
    </ul> 
 
    <div id="loadMore" ng-click="showMore()">Load more</div> 
 
    <div id="showLess" ng-click="showLess()">Show less</div> 
 
</div>

正如你所看到的，它是那麼微不足道實現顯示更少的項目，因爲您只需更改控制器中的數字。

來源

2016-07-12 11:12:57 Rhumborl

您可以直接使用角的ng-show/ng-hide和視圖結合來實現。你不需要爲此使用jQuery。下面是一個簡單例子：

var app = angular.module("sa", []); 
 

 
app.controller("FooController", function($scope) { 
 

 
    $scope.offers = []; 
 

 
    // Generating dummy data 
 
    for (var i = 0; i < 100; i++) { 
 
    var number = i + 1; 
 
    $scope.offers.push({ 
 
     number: number, 
 
     name: 'Offer ' + number 
 
    }); 
 
    } 
 

 
    $scope.showFirstTwo = function() { 
 
    var shown = 0; 
 

 
    angular.forEach($scope.offers, function(offer) { 
 
     if (!offer.isVisible && shown < 2) { 
 
     offer.isVisible = true; 
 
     shown++; 
 
     } 
 
    }); 
 
    }; 
 
    
 
    // At load, display first two by default 
 
    $scope.showFirstTwo(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<div ng-app="sa" ng-controller="FooController"> 
 
    <ul> 
 
    <li ng-repeat="offer in offers" ng-show="offer.isVisible"> 
 
     Offer ID: <strong>{{offer.number}}</strong> 
 
     <br>Offer name: <strong>{{offer.name}}</strong> 
 
    </li> 
 
    </ul> 
 
    
 
    <a href="" ng-click="showFirstTwo()">Load more</a> 
 
</div>

來源

2016-07-12 11:12:15

當使用AngularJS我個人儘量避免編寫自定義的jQuery代碼爲DOM操作。要實現您所描述的功能，我會採取以下方法。

將項目加載到臨時數組中，例如offersHidden。
當項目加載，shift()從offersHidden的2項和push()到offres
當用戶點擊載入更多，做同樣的事情：offres.push(offersHidden.shift())

你讓AngularJS照顧這樣UI操作並避免任何衝突。

來源

2016-07-12 11:14:45

正如Rhumborl所說，您應該使用ng-show來解決這個問題。單擊按鈕時，只需增加一個變量並僅在變量>索引時顯示項目。

<li ng-show="variable > index"></li>

$('#loadMore').click(function() { 
    $scope.variable += 2; 
});

來源

2016-07-12 11:14:46

實現一個「加載更多」按鈕加載更多的元素時，其點擊

回答

相關問題