CODEWITHSUNDEEP
angularjs
Krishna Prasad Ambaripeta
Krishna Prasad Ambaripeta

Reputation: 171

Ajax in AngularJS Service

Created an Angular Service:

calculator_app.service('FillOpportunity', function () {
    this.fill_opportunity = function (path,scope) {

        $.ajax({
            url: 'opportunitycalculator/calculator/GetProducts?idstring=' + path,
            type: "GET",
            cache: false,
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (data)
            {
                scope.opportunity_data = data;
                scope.$apply();

            },
            error: function () {
            }
        });
    };
});

Called the service on ng-change of a dropdown:

FillOpportunity.fill_opportunity($scope.result_path,$scope);

The scope.opportunity_data is binded to the select in UI:

<select id="seloppurtunityproducts" name="selproducttype" multiple="" style="height:300px" ng-model="opportunity_products" ng-options="a for a in opportunity_data"></select>

On ng-Change, Ajax is called when I check in Network of Chrome, but the value is not updated in the select box.

Any inputs?

Upvotes: 0

Views: 35

Answers (1)

Kyle
Kyle

Reputation: 5557

Don't use jQuery's ajax. Use the built in $http. Using $http automatically begins the digest cycle of angular's builtin compiler. If you must use jquery... then you'd have to call $scope.$apply(); every time there is a data change.

Service:

calculator_app.factory("calcService", ["$http", function($http) {
    return {
        getItem: function(url, items) {
            return $http.get(url,
                // query string like { userId: user.id } -> ?userId=value
                { params: items });
        }
    }
}]);

Inject the service into your controller and use:

calculator_app.controller("MainCtrl", ["calcService", "$scope", function(calcService, $scope) {
    $scope.opportunity_data = [];

    var payload = {
        idstring: path
    };

    //call the service
    calcService.getItem('path/to/calc/api', payload).then(function(response) {
            $scope.opportunity_data = response.data;
        }).catch(function(response) {
            alert('error' + response.data);
        });
}]);

Upvotes: 2

Related Questions