【发布时间】:2018-01-05 14:35:41
【问题描述】:
我有一个 ng-repeat 指令从静态 json 文件中提取数据。我正在使用过滤器来限制指令和按钮的项目数量来增加/减少该限制。我希望在单击按钮时将内容添加到列表中(添加到顶部)。 请注意,我不需要增加 de 数组,我已经在 json 上加载了我需要的所有数据。
<!DOCTYPE html>
<html lang="pt-BR" 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>
Filtrar por: <strong>{{query}}</strong> <br> <input type="text" placeholder="Digite para filtrar" ng-model="query">
</label>
<label>
<input type="radio" ng-model="filtrarPor" name="filtro" value="" checked class="checked"> padrão
</label>
<label>
<input type="radio" ng-model="filtrarPor" name="filtro" value="cliente"> cliente
</label>
<label>
<input type="radio" ng-model="filtrarPor" name="filtro" value="tipo"> tipo
</label>
<button ng-click="limit = limit + 3" ng-disabled="limit >= exemple.portifolio.length">mostrar mais</button>
<button ng-click="limit = limit - 3" ng-disabled="limit == 3">mostrar menos</button>
</form>
<div class="portifolio-itens" ng-init="limit = 6">
<div class="portifolio-item" ng-repeat="item in exemple.portifolio | filter:query | orderBy:filtrarPor | limitTo:limit">
<a data-id="#job{{$index}}">
<h3>{{item.tipo}}</h3>
<h4>{{item.cliente}}</h4>
<p>{{item.info}}</p>
</a>
</div>
</div>
</body>
</html>
【问题讨论】:
-
推送数据到
exemple -
那么,您希望页面显示数组的最后 6 个元素,您是否单击 + 3,改为显示最后 9 个元素?如果这是您想要的,请使用
limitTo:-limit。否则,请通过具体示例(数据)说明您想要实现的目标。 -
感谢 cmets!我设法通过 CSS flexbox 实现了我所需要的,而无需更改我发布的 js / html 的任何方面:.portifolio-itens { display: flex; flex-wrap: 换行; }
-
@RafaelOrtman 您可以回答自己的问题,详细说明解决方案,然后接受您的回答,以便未来的观众也能从中受益。
标签: angularjs angularjs-ng-repeat angularjs-orderby angularjs-limitto