Question

我希望我的li元素被隐藏，当我的状态加载时，我想只显示前两个元素，当我点击一个按钮时，显示接下来的两个元素，依此类推。

这是它应该如何运作的：

在我的角度应用程序中，我将我的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-一起使用它时它不起作用重复。

我该如何解决这个问题？

Answer 1

您可以直接使用Angular的ng-show / ng-hide并查看绑定来实现此目的。你不需要为此使用jQuery。以下是一个示例示例：

＆＃13;

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();
});

＆＃13;

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

＆＃13;

Answer 2

当您使用Angular时，您应该尽可能避免以这种方式直接操作DOM。相反，您应该利用Angular指令来控制元素的显示方式，在本例中为ng-show。

您已将列表存储在$scope.offres中。您只需跟踪要显示的项目数量，并仅在$index中的ng-repeat低于该值时显示：

＆＃13;

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;
    }
  };
});

＆＃13;

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

＆＃13;

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

＆＃13;

正如您所看到的，实现显示较少的项目是微不足道的，因为您只是更改控制器中的数字。

Answer 3

使用AngularJS时，我个人试图避免为DOM操作编写自定义JQuery代码。要实现您所描述的功能，我会采取以下方法。

将项目加载到临时数组中，例如offersHidden。
加载项目时，shift() offersHidden和push()至offres
当用户点击“加载更多”时，请执行相同的操作：offres.push(offersHidden.shift())

这样你就让AngularJS处理UI操作并避免任何冲突。

Answer 4

正如Rhumborl所说，你应该使用 ng-show 来处理这个问题。当您单击按钮时，只需增加一个变量并仅在变量＆gt;时显示项目。索引。

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

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

实施＆＃34;加载更多＆＃34;单击

4 个答案: