CODEWITHSUNDEEP
javascriptangularjsasp.net-web-apiangularjs-ng-repeat
Andrea Merlin
Andrea Merlin

Reputation: 71

Angular ng-repeat refresh from WebApi2 response.data

I have created an angular function where a get data from from a WebApi. This function get data in json format with an $http.get call.

Then I receive data from into response.data object.

    dataService.GetDataFromApi.then(
         function(response){
             ctrl.items = response.data; },
    function(error){});

In html view page I use ng-repeat to show all item from response.data. 

<table>
    <tr ng-repeat="item in ControllerNama.items">
        <td>{{ item.name }}</td>
    </tr>
</table>

This work fine.

Now, I need to refresh view page after click a button into html. When I click this button, one of items are removed from another api. I can call same api and refresh data (with overhead) or I can remove data from ctrl.items without call refresh-api (if remove api return 200 status code).

Which are the best soluzion? How I can refresh repeat object by controller without call GetDataFromApi function?

Thanks?

Upvotes: 0

Views: 482

Answers (1)

Jaime Still
Jaime Still

Reputation: 1998

Without having too much information on how you're populating the collection being iterated on in ng-repeat, I can provide how I typically handle binding to collections retrieved from an API call.

Typically, I'll set up an Angular service that contains a function for the API call, as well as an object with a property that represents the array. For instance: 

(function () {
    var apiSvc = function ($q, $http) {
        var
            model = function () {
                collection = [];

                return {
                    collection: collection
                };
            },
            getCollection = function () {
                var deferred = $q.defer();

                $http({
                    url: '/api/something/getCollection',
                    method: 'GET'
                }).success(function (data) {
                    model.collection = data;
                    deferred.resolve(data);
                }).error(function (err) {
                    // Do something if this fails
                });

                return deferred.promise;
            };

        return {
            model: model,
            getCollection: getCollection
        };
    };

    // Inject external angular modules into the service
    apiSvc.$inject = ['$q', '$http'];

    // Add the service to your angular module
    apiApp.factory('appSvc', appSvc);
}());

Then, as an example using a directive, you would inject the service into the directive and bind the model object to a scope object on the directive:

(function () {
    var apiDirective = function (apiSvc) {
        return {
            restrict: 'EA',
            replace: true,
            templateUrl: '/content/templates/demo-directive.html',
            link: function (scope) {
                scope.model = demoSvc.model;
                apiSvc.getCollection();
            }
        }
    };

    apiDirective.$inject = ['apiSvc'];
    apiApp.directive('apiDirective', apiDirective);
}());

And iterate through the collection in the template as follows:

<div ng-repeat="item in model.collection track by $index">
    <p ng-bind="item.property"></p>
</div>

Then, if you do anything that would modify the collection, simply call the service function to update the collection, and your view should reflect the updates.

Upvotes: 1

Related Questions