current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Sign up ×
Stack Overflow is a community of 4.7 million programmers, just like you, helping each other. Join them; it only takes a minute:
up vote 0 down vote favorite

I want to increment the data via Button click or scroll.

I have a function which loads the data after button click loadDataQueryDB(param, param, param). With that, I am passing data to MongoDB query.

Well how can I increment my var limit = 50; + 5; after each button click?

Node.js 

router.get('/load', function(req, res) {
    var skip =  0;
    var limit =  50;
    var place_val = req.query.place;
    var category_val = req.query.category;
    var specCategory_val = req.query.specCategory;
    if(category_val, specCategory_val, place_val){    
        Experiences
            .find({category : category_val, city:place_val})
            .lean()
            .skip(skip)
            .limit(limit)
            .exec(function(err, docs_accommo) {

                res.send(docs_accommo);
                console.log("First");


        });
    }
});

Angular.js

app.controller('loadData', ['$scope', '$http', '$window', '$upload', '$rootScope',
    function($scope, $http, $window, $upload, $rootScope) {

  $scope.loadDataQueryDB = function(place_value, category_value, specCategory_value){
    console.log(place_value);
    console.log(category_value);
    console.log(specCategory_value);    

        $scope.datafront = [];
        var options = {
            place : place_value, 
            category: category_value,
            specCategory : specCategory_value
        };

            $http.get('/load',
                     {params: options})
            .success(function(data) {

                $scope.datafront = data;
            }); 
    };

});

HTML

<div ng-click="loadDataQueryDB(place, category, specCategory)">
    <div ng-repeat="x in datafront | limitTo:? track by x._id" ng-cloak>
        {{x}}
    </div>
</div>

<button class="btn btn-default"  style="float:right; margin-bottom:20px;"/>
share|improve this question
    
I think you have messed up with ternary operator while setting limitTo value – Pankaj Parkar 20 hours ago
    
What about using a http promise and reaload only the ng-repeat object?, that will solve your problem. See: augustolemble.com/post?id=56843e1c12ba70244b792e4f – Augusto Federico Lemble 20 hours ago
    
@Augusto, it looks good, but how can I increment the appearing data? How would you write this code? – Tony Cenoti 20 hours ago
    
Added as an answer below, I hope it helps :) – Augusto Federico Lemble 19 hours ago
up vote 0 down vote

Something like the code below, using services and http promises, the data returned form the server its on promise.data.

app.controller('loadData', ['$scope', '$http', '$window', '$upload', '$rootScope','dataService',
    function($scope, $http, $window, $upload, $rootScope, dataService) {

  $scope.loadDataQueryDB = function(place_value, category_value, specCategory_value){
    console.log(place_value);
    console.log(category_value);
    console.log(specCategory_value);    

        $scope.datafront = [];
        var params = {
            place : place_value, 
            category: category_value,
            specCategory : specCategory_value
            skip : $scope.skip,
            limit : $scope.limit
            }
        dataService.getData(params).then(function(promise){
            $scope.dataFront = promise.data;
            //Increment the limit by ten
            $scope.limit =+ 10;
        })

    };

});    
app.module('dataService').factory('dataService',['$http',function ($http) {

    var service = {};

    factory.getData= function (params) {
        var promise = $http({
            method: 'GET',
            url: '/load',
            params: params
        });
        return promise;
    }

    return service;

}]);

You should have only the gets that return views on the router and the rest of the get and post calls on a service, at least I develop like that and its more confortable.

share|improve this answer
    
Ok and is there any way to load the next 5 documents? – Tony Cenoti 19 hours ago
    
To load controllers and sevrices separated in documents? – Augusto Federico Lemble 19 hours ago
    
I mean for example on button click with ng-click="loadMore()". After I clicked on the button it should load the next data. If I load huge files even with promise it takes time. Therefore I will need to limit() and skip() the data as previous. However I will use promise as well. – Tony Cenoti 19 hours ago
    
Ho I miss that, weel you will need to have the function $scope.loadMore = function(){ dataService.getData(params).then(function(promise){ $scope.dataFront = promise.data; })} on your controller, and increment the limit variables everytime you use it. – Augusto Federico Lemble 18 hours ago
    
I didn't understand. The question is how can I increment it limit() – Tony Cenoti 18 hours ago

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.