CODEWITHSUNDEEP
javascriptjqueryangularjsonsen-ui
user3201500
user3201500

Reputation: 1618

Refresh list in ng-repeat without onclick funtion

Hello i am trying to display data from server in Angularjs App, where i got the data and use ng-repeat to display it through controller.

Here is how my controller looks like: 

module.controller('FiveReasons', function($scope, $http, $rootScope, $sce) {
ons.ready(function() {
                    $scope.reasonsLists = {};
                   var reasonsListing = $http.get("http://vbought.com/design_14/index.php/design_ci/post/Clients");
                    reasonsListing.success(function(data, status, headers, config) {
                        console.log(data[0].post_title);
                        $scope.reasonsLists = data;
                        $scope.spinner = false;
                    });
                    reasonsListing.error(function(data, status, headers, config) {

                        alert("Can Not load the address Ajax");
                    });   
    });
});

But when the ng-repeat finish loading, the data is not displaying.

Here is how my ng-repeat is:

  <ons-carousel swipeable overscrollable auto-scroll fullscreen var="carousel" name="FiveRes" class="FiveRes">

        <div ng-repeat="reasonsList in reasonsLists">

          <ons-carousel-item style="background: #09a4c0;" >
            <div class="item-label">Number : {{reasonsList}}</div>

          </ons-carousel-item>

        </div>


          <ons-carousel-cover></ons-carousel-cover>
        </ons-carousel>

How can i now refresh the list once the data is there. Like we do "trigger("refresh")" in jquery.

After running ng-repeat, this is how i get the value but the screen is going blank.

enter image description here

Thank you! (In advance)

Upvotes: 0

Views: 768

Answers (3)

JcDenton86
JcDenton86

Reputation: 932

Try this:

module.controller('FiveReasons', function($scope, $http, $rootScope, $sce) {
       ons.ready(function() {
           $scope.reasonsLists = {};
           var reasonsListing = $http.get("http://vbought.com/design_14/index.php/design_ci/post/Clients");
           reasonsListing.success(function(data, status, headers, config) {
                 console.log(data[0].post_title);
                 $scope.reasonsLists = data;
                 $scope.spinner = false;
           });
           reasonsListing.error(function(data, status, headers, config) {
                 alert("Can Not load the address Ajax");
           }); 
           //ADD this to notify Angular for the changes and run a digest cycle
           $scope.$digest();  
      });
});

This is happening because the event (ons-ready) handler will not start a new $digest cycle.

To display the data without having to call $digest(), remove the ons-ready callback and execute your code directly in the controllers body. Like the example bellow:

module.controller('FiveReasons', function($scope, $http, $rootScope, $sce) {
       $scope.reasonsLists = {};
       var reasonsListing = $http.get("http://vbought.com/design_14/index.php/design_ci/post/Clients");
       reasonsListing.success(function(data, status, headers, config) {
             console.log(data[0].post_title);
             $scope.reasonsLists = data;
             $scope.spinner = false;
       });
       reasonsListing.error(function(data, status, headers, config) {
             alert("Can Not load the address Ajax");
       }); 
       //No need to call $digest
});

UPDATE: Check this Codepen which is a simplified version of your code that shows only the issue. Remove $scope.$digest() from the comments to see the carousel working.

Upvotes: 1

Mike Feltman
Mike Feltman

Reputation: 5176

I think in this case I'd eliminate the use of ready and call your code using ng-init. 

module.controller('FiveReasons', function($scope, $http) {
this.reasonsLists = {};
$scope.getReasonsLists = function() {
    $scope.reasonsLists = {};
    $http.get("http://vbought.com/design_14/index.php/design_ci/post/Clients")
        .success(function(data, status, headers, config) {
            console.log(data[0].post_title);
            $scope.reasonsLists = data;
            $scope.spinner = false;
        })
        .error(function(data, status, headers, config) {
            alert("Can Not load the address Ajax");
        });
};

});

then in your html on the table tag just add ng-init="getReasonsLists()"

Upvotes: 1

NoRyb
NoRyb

Reputation: 1544

A "refresh" should not be necessary as angular uses a different approach. After certain events like "click" or the return of a $http-promise, angular goes through the binded variables and checks if they have changed - and if so - changes the DOM.

In your case I think the promise is returning before you add the success-callback. Try chaining it like:

$http.get("http://vbought.com/design_14/index.php/design_ci/post/Clients").success(function(data, status, headers, config) {
    console.log(data[0].post_title);
    $scope.reasonsLists = data;
    $scope.spinner = false;
}).error(function(data, status, headers, config) {
    alert("Can Not load the address Ajax");
});

In other cases you can use $scope.$apply() but I think this should tell you, that you can't nest $digests as there should be one going on after a $http-request.

Upvotes: 0

Related Questions