实施“加载更多”按钮以在单击时加载更多元素

雷诺不是比尔·盖茨

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

这是应该如何工作的:

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>

我将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-repeat一起使用时,它却无法工作。

我该如何解决?

Rhumborl

使用Angular时,应尽量避免以这种方式直接操作DOM。相反,在这种情况下,您应该利用Angular指令来控制元素的显示方式ng-show

您已经将列表存储在中$scope.offres您只需要跟踪要显示的项目数,并且仅在$index可用项目ng-repeat低于该值时才显示它

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>

如您所见,然后实现显示较少的项目就变得微不足道了,因为您只需要在控制器中更改一个数字即可。

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

实施“加载更多”按钮以在单击时加载更多元素

来自分类Dev

如何在按钮单击上添加更多元素

来自分类Dev

WP8列表框在加载更多元素时跳动

来自分类Dev

实施“更多加载”功能

来自分类Dev

实施“更多加载”功能

来自分类Dev

单击ajax加载更多按钮时未重新加载砌体项目

来自分类Dev

单击加载更多按钮后如何显示加载更多页面的整个源代码?

来自分类Dev

Linq在加载时获得更多数据按钮单击开始索引和结束索引

来自分类Dev

Laravel + Vue.js。单击按钮时加载更多数据

来自分类Dev

加载更多按钮应该消失

来自分类Dev

android recyclerview加载更多按钮

来自分类Dev

在React中加载更多按钮

来自分类Dev

jQuery加载更多并隐藏按钮

来自分类Dev

骨干集合。“加载更多”按钮

来自分类Dev

加载更多按钮应消失

来自分类Dev

隐藏“加载更多:延迟加载中的按钮”

来自分类Dev

到达顶部时加载更多

来自分类Dev

按下按钮时加载更多内容不起作用

来自分类Dev

如何使用按钮单击“加载更多”来加载API数据的下一页?

来自分类Dev

点击显示更多元素

来自分类Dev

“加载更多”按钮无法正确排序结果

来自分类Dev

如何制作更多加载按钮

来自分类Dev

使用更多按钮滚动转换延迟加载

来自分类Dev

如何实现流星收集的“加载更多”按钮

来自分类Dev

如何制作更多加载按钮

来自分类Dev

使用更多按钮滚动转换延迟加载

来自分类Dev

在AngularJS和lightGallery中加载更多按钮

来自分类Dev

使用scrapy使用“加载更多”按钮

来自分类Dev

从 ratemyprofessor 使用加载更多按钮抓取数据