我有一个包含很多行的 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
?
谢谢
最佳答案
您可以使用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>
关于javascript - 使用 angularjs 创建“阅读更多”按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26385363/