Question

我想将此代码更改为angular，我编写部分代码，但我不知道应该使用什么替换：It（）。 jquery代码在此网址中：jsfiddle.net

我的角度代码就是这样：

    x = 3;
    $scope.itemsPerPage = 3; //show article in page when page load . this code is replace of : " $('#myList li:lt('+x+')').show(); "
    sizeLi = $scope.articles.length; //sizeLi return count of my articles . Replace of : " $("#myList li").size(); "
    $('#loadMore').click(function() {
          x = (x + 5 <= sizeLi) ? x + 5 : sizeLi;
          **$scope.articles.push($scope.articles[x]); // Replace of : " $('#myList li:lt('+x+')').show(); "**
          return false;
    });

Answer 1

根据您的jsfiddle，您可以使用limitTo以角度方式实现此目的，并添加两个函数来设置limitTo范围

控制器中的

：

  $scope.limit = 1;
  $scope.articles = [
    'one','two','three','four','five','six','seven','eight','nine','ten'
    ];

    $scope.loadMore = function() {
      var sizeLi = $scope.articles.length;
      var x = $scope.limit;
      x = (x + 5 <= sizeLi) ? x + 5 : sizeLi;
      $scope.limit =x;
    };

    $scope.showLess = function() {
      var sizeLi = $scope.articles.length;
      var x = $scope.limit;
      x=(x-5<0) ? 3 : x-5;
      $scope.limit =x;
    };

和HTML：

<ul id="myList">
    <li ng-repeat="articale in articles | limitTo : limit : 0">{{articale}}</li>
</ul>
<div style="cursor:pointer" ng-click="loadMore()" >Load more</div>
<div style="cursor:pointer"  ng-click="showLess()">Show less</div>

更新 HTML 以显示或隐藏加载越来越少的按钮

<div style="cursor:pointer;color:green" ng-click="loadMore()" ng-show="limit<articles.length">Load more</div>
<div style="cursor:pointer;color:red"  ng-click="showLess()" ng-show="limit>0">Show less</div>

有关详情，请参阅DEMO

转换：It（）函数jquery到angular

1 个答案: