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 ? */
};

如何仅使用2行（来自对象$scope.users？

启动response

感谢

Answer 1

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

＆＃13;

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. "
    }

  ]

});

＆＃13;

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

＆＃13;

使用angularjs创建更多阅读按钮

1 个答案: