How to store add params in api url using angular js

Question

my angular js function code

$scope.cardcall = function (cardtype) { 
        $scope.cityname=cityname;   
        $http({method: 'GET',url: '/api/v1/asasas&filterBy=cardNames&filterByValue='+cardtype.key}).success(function(data) {
            $scope.deal = data.deals;              
        });                  
    };

my view code

<div class="check_box" ng-repeat="cardtype in card.cardTypes.buckets">                                                  
 <label>
 <input type="checkbox" value=" {{cardtype.key}}" name="cardname" ng-click="cardcall(cardtype)" /> {{cardtype.key}} 
 </label>                                                   
</div>

now when some click on check box it call api like

/api/v1/asasas&filterBy=cardNames&filterByValue=asssas

What i am try to make when some one click 2nd check box then api call like

/api/v1/asasas&filterBy=cardNames&filterByValue=asssas,xsdza

Answer 1

You could add a .checked value to cardtype via ng-model

<input type="checkbox" ng-model="cardtype.checked" value=" {{cardtype.key}}" name="cardname" ng-change="typecall()" />

Then you could run a loop in your code to determine what's checked

$scope.cardcall = function () { 
    $scope.cityname=cityname;

    var keys = [],
        buckets = $scope.card.cardTypes.buckets;

    for (var i = 0, len = buckets.length, i < len; i++) {
        if (buckets[i].checked)
            keys.push(buckets[i].key);
    }

    if (keys.length) {
        keys = keys.join();

        $http({method: 'GET',url: '/api/v1/asasas&filterBy=cardNames&filterByValue=' + keys}).success(function(data) {
            $scope.deal = data.deals;              
        });
    }
};

This will be called every time one of those checkboxes gets checked or unchecked and since it looks through all of the checkboxes there's no need to pass cardtype.key anymore. If no checkboxes are checked it won't do an AJAX call.