javascript - 使用 angularjs 创建“阅读更多”按钮

Question

我有一个包含很多行的 JSON 对象，我想向范围添加越来越多的这些对象(假设每次点击都会从主 json 中添加 2 行)。

我有respone对象、包含、主要 JSON(包含所有行)和范围 $scope.users从那里我得到所有用户 ng-repeat="user in users" .

<button ng-click="readMore()">Read More</button>

$scope.readMore = function() {
    /* HOW CAN I ADD HERE INTO `$scope.users` to have 2 more rows ? */
};

我该如何开始$scope.users只有 2 行(来自对象 response ？

谢谢

Answer 1

您可以使用limitTo过滤器，请参阅下面的示例

var app = angular.module('app', []);

app.controller('fCtrl', function($scope) {

  $scope.limit = 2;
$scope.max = false;
  $scope.readMore = function() {

    if ($scope.limit < $scope.rows.length) {
      $scope.limit =$scope.limit  + 2;
       if ($scope.limit >= $scope.rows.length) {
       
        $scope.max = true;
       }
      
    }
    else {
      
      $scope.max = true;
      }

  };

  $scope.rows = [

    {
      rowid: 1,
      text: "Contrary to popular belief, Lorem Ipsum is not simply random text. "
    }, {
      rowid: 2,
      text: "Contrary to popular belief, Lorem Ipsum is not simply random text. "
    }, {
      rowid: 3,
      text: "Contrary to popular belief, Lorem Ipsum is not simply random text. "
    }, {
      rowid: 4,
      text: "Contrary to popular belief, Lorem Ipsum is not simply random text. "
    }, {
      rowid: 5,
      text: "Contrary to popular belief, Lorem Ipsum is not simply random text. "
    }, {
      rowid: 6,
      text: "Contrary to popular belief, Lorem Ipsum is not simply random text. "
    }

  ]

});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
  <div ng-controller="fCtrl">
    <p ng-repeat="item in rows | limitTo: limit">{{item.rowid}}). {{item.text}}</p>
    <button ng-click="readMore()" ><span ng-if="!max">Read More</span><span ng-if="max">End</span></button>
  </div>
</div>