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

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

这就是它的工作原理：

在我的角度应用程序中，我显示我的li元素如下：

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

<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一起使用时，它会工作，但不会工作

---

如何解决此问题？

您可以直接使用Angular的

ng show

/

ng hide

和视图绑定来实现此目的。您不需要为此使用jQuery。以下是一个示例：

var-app=angular.module（“sa”，[]）；
应用控制器（“FooController”，功能（$scope）{
$scope.offers=[]；
//生成虚拟数据
对于（变量i=0；i<100；i++）{
变量数=i+1；
$scope.offers.push({
号码:号码,，
名称：'报价'+编号
});
}
$scope.showFirstTwo=函数（）{
var=0；
angular.forEach（$scope.offers，函数（offer）{
如果（！offer.isVisible&&show<2）{
offer.isVisible=true；
显示++；
}
});
};
//加载时，默认情况下显示前两个
$scope.showFirstTwo（）；
});



报价ID:{{Offer.number}

报价名称：{{Offer.name}


在使用Angular时，应尽量避免以这种方式直接操作DOM。在本例中，您应该利用角度指令来控制元素的显示方式

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


angular.module（'myapp'，[]）.controller（'ctrl1'，function（$scope）{
//使用虚拟数据设置列表
$scope.offres=[]；
对于（变量i=0；i<11；i++）{
$scope.offres.push（i+1）；
}
//设置初始索引
//我们将使用此变量控制显示-请参阅HTML中的ng show=“”
$scope.loadIndex=2；
//增加可见项的函数
$scope.showMore=函数（）{
//如果在列表末尾，则不递增
如果（$scope.loadIndex<$scope.offres.length）{
$scope.loadIndex+=2；
}
};
//减少可见项的功能
$scope.showLess=函数（）{
//如果在列表的开头，则不要递减
如果（$scope.loadIndex>2）{
$scope.loadIndex-=2；
}
};
});
#加载更多{
颜色：绿色；
光标：指针；
}
#加载更多：悬停{
颜色：黑色；
}
#炫耀的{
颜色：红色；
光标：指针；
}


{{offre}

加载更多
少展示
在使用AngularJS时，我个人尽量避免编写用于DOM操作的自定义JQuery代码。
为了实现您描述的功能，我将采用以下方法

将项目加载到临时数组中，例如
offersHidden
加载项目时，
shift（）
从
offersHidden
和
push（）
到
offres
当用户单击Load More时，执行相同的操作：
offres.push（offersHidden.shift（））
这样，您就可以让AngularJS处理UI操作并避免任何冲突。
正如Rhumboll所说，您应该使用ng show来处理此问题。
单击按钮时，只需增加一个变量，并仅在变量>索引时显示项目


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