ajaxangularjsdrupaldrupal-7drupal-ajax

Drupal AngularJS ajax simple ng-repeat update


i have problem replacing my ng-repeat my html inside ng-app

<a href="#proceed" ng-click="order.submitOrderAjax()">
    <?php print t('Finish order'); ?>
</a>

<ul>
    <li ng-repeat="error in order.errors">{{ error.text }}</li>
</ul>

controller app.js

app.controller('orderController', function() {
this.errors = [];
this.submitOrderAjax = function(){
 var data = {} // some data here like name, phone
 jQuery.ajax({
    type: 'POST',
    url: Drupal.settings.basePath + 'ajax/submit_cart',
    data: { 'order': data },
    dataType: 'json',
    success: function(response){
        if(response.status == true){
            var link = response.link.replace(/\\\//g, "/");
            window.location.href = link;
        }else{
            this.errors = response.errors;
            console.log(this.errors);
        }   
    },
 });
};

console.log returns what i need but ng-repeat is not updating


Solution

  • Actually html renders before response so you need render ng-repeat after response

    <a href="#proceed" ng-click="order.submitOrderAjax()">
        <?php print t('Finish order'); ?>
    </a>
    
    <ul ng-if="flag">
        <li ng-repeat="error in order.errors">{{ error.text }}</li>
    </ul>
    

    Controller

        app.controller('orderController', function($scope) {
        this.errors = [];
    $scope.flag=false;
        this.submitOrderAjax = function(){
            var data = {} // some data here like name, phone
            jQuery.ajax({
                type: 'POST',
                url: Drupal.settings.basePath + 'ajax/submit_cart',
                data: { 'order': data },
                dataType: 'json',
                success: function(response){
                    if(response.status == true){
                            var link = response.link.replace(/\\\//g, "/");
                            window.location.href = link;
    
                    }else{
                        this.errors = response.errors;
                        console.log(this.errors);
    $scope.flag=true;
                    }   
                },
              });
            };