0

I have a ng-repeat directive pulling out data from a static json file. I am using a filter to limit the number of items of the directive and buttons to increase / decrease that limit. I want the content to be prepended (added to the top) to the list when the button is clicked. Notice that I don't need to increment de array, I have loaded all the data that I need on the 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>
Rafael Ortman
  • 1
  • 3
  • push data to `exemple` – dfsq Jan 05 '18 at 14:40
  • So, you want the page to display the last 6 elements of the array, and is you click on + 3, show the last 9 elements instead? If that's what you want, use `limitTo:-limit`. Otherwise, explain, with a concrete example (data), what you want to achieve. – JB Nizet Jan 05 '18 at 15:00
  • Thanks for the comments! I managed to achieve what I needed through CSS flexbox without needing to change any aspect of the js / html that I posted: .portifolio-itens { display: flex; flex-wrap: wrap-reverse; } – Rafael Ortman Jan 06 '18 at 17:15
  • @RafaelOrtman you could answer your own question detailing the solution, then accept your answer so that future viewers can benefit as well. – Omar Einea Jan 07 '18 at 20:33

1 Answers1

0

Thanks for the comments! I managed to achieve what I needed through CSS flexbox without changing any aspect of the js / html that I posted: 

.portifolio-itens {display: flex; flex-wrap: wrap-reverse;}
Rafael Ortman
  • 1
  • 3