クリックしたときにもっと多くの要素を読み込むために "Load More"ボタンを実装する

Question

私のli要素を隠して、状態がロードされたとき最初の2要素だけを表示したい場合は、 2つの要素などがあります。

これは、それがどのように動作するかを示します。

私の角度アプリケーションで

http://jsfiddle.net/zuyvgwx3/2/

私は、次のように私のli要素を表示する：

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

私は李display:none;に設定要素とJavaScriptコードを持っています最初の2つの要素を次のように示しています。

問題は、私の状態がすべてのli要素をロードし、最初の2つの要素だけでなく、私はそれが動作するように見えますが、ng-repeatで使用すると動作しません。

どうすればこの問題を解決できますか？

Answer 1

あなたが角度を使用しているとして、あなたが直接可能このように、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>

あなたが見ることができるように、それはそれから自明ですコントローラー内の番号を変更するだけで、アイテムの表示回数を減らすことができます。

Answer 2

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

Answer 3

AngularJSを使用する場合、私は個人的にDOM操作用のカスタムJQueryコードを書くことを避けてください。 あなたが説明した機能を実装するには、私は次のアプローチを採用しました。

1. アイテムを一時的な配列、たとえばoffersHiddenにロードします。アイテムがロードされている
2. 、shift() 2つのoffersHiddenからの項目と、ユーザはもっと負荷をクリックoffres
3. からpush()、同じことを実行します。あなたはAngularJSはの世話をしてみましょうoffres.push(offersHidden.shift())

その方法をUIの操作と競合を避けることができます。

Answer 4

Rhumborlによると、これを処理するには、ng-showを使用する必要があります。 ボタンをクリックすると、variable> indexの場合にのみ変数をインクリメントして項目を表示します。

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

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