如何在Angular中实现点击按钮时向ng-repeat列表顶部追加内容？

没问题，我明白你要的效果——点击「显示更多」时，新增的内容要出现在列表顶部，而不是默认的底部。因为数据已经全部加载好了，我们只需要调整limitTo过滤器的用法就能实现这个需求。

核心原理 #

默认的limitTo:limit是从数组的开头（索引0）取前limit个元素，所以每次增加limit时，新元素会加在列表底部。要让新元素出现在顶部，我们需要利用limitTo的第二个参数（起始位置），从数组的末尾往前取指定数量的元素：当limit增大时，起始位置会向前偏移，这样新的元素就会出现在现有列表的上方。

修改后的完整代码 #

<!DOCTYPE html>
<html lang="zh-CN" ng-app="myApp">
<head>
<script src="js/angular.min.js"></script>
<script src="js/angular-sanitize.min.js"></script>
<script>
var myApp = angular.module('myApp', ['ngSanitize']);
myApp.controller('myController', function myController($scope,$http){
$http.get('js/exemple.json').then(function(response){
$scope.exemple = response.data;
});
})
</script>
</head>
<body class="home" ng-controller="myController">
<form class="filtro">
<label> 筛选条件：<strong>{{query}}</strong><br>
<input type="text" placeholder="输入关键词筛选" ng-model="query">
</label>
<label>
<input type="radio" ng-model="filtrarPor" name="filtro" value="" checked class="checked"> 默认
</label>
<label>
<input type="radio" ng-model="filtrarPor" name="filtro" value="cliente"> 客户
</label>
<label>
<input type="radio" ng-model="filtrarPor" name="filtro" value="tipo"> 类型
</label>
<!-- 优化按钮禁用条件，避免数据未加载时的错误 -->
<button ng-click="limit = limit + 3" ng-disabled="!exemple?.portifolio || limit >= exemple.portifolio.length">显示更多</button>
<button ng-click="limit = limit - 3" ng-disabled="!exemple?.portifolio || limit == 3">显示更少</button>
</form>
<div class="portifolio-itens" ng-init="limit = 6">
<!-- 修改limitTo过滤器，添加起始位置参数 -->
<div class="portifolio-item" ng-repeat="item in exemple.portifolio | filter:query | orderBy:filtrarPor | limitTo:limit: (exemple?.portifolio?.length - limit || 0)">
<a data-id="#job{{$index}}">
<h3>{{item.tipo}}</h3>
<h4>{{item.cliente}}</h4>
<p>{{item.info}}</p>
</a>
</div>
</div>
</body>
</html>

关键修改点说明 #

1. 调整limitTo过滤器：
   新增了起始位置参数(exemple?.portifolio?.length - limit || 0)，其中：

   • exemple?.portifolio?.length用可选链操作符避免数据未加载时的报错
   • 当limit为6时，起始位置是数组总长度 -6，取数组的最后6个元素
   • 当limit增加到9时，起始位置变为数组总长度 -9，取数组的最后9个元素——相当于把数组中更靠前的3个元素追加到了列表顶部

2. 优化按钮禁用逻辑：
   给按钮的ng-disabled添加了!exemple?.portifolio判断，确保在JSON数据加载完成前，按钮处于禁用状态，避免用户误操作导致的错误。

内容的提问来源于stack exchange，提问作者Rafael Ortman