user1935987 user1935987 - 4 months ago 23
AngularJS Question

AngularJS ng-class don't change when the conditions are changed

I'm doing a

wizard-form
using
ui-router
, following this tutorial.

Currently I'm trying to do like this:

HTML:

<div id="status-buttons-wizard" class="text-center">
<a ui-sref-active="active" ui-sref=".item"> <span></span>Item</a>
<a ng-class="{ disabled: !ItemCheckPass, enabled: ItemCheckPass}" ui-sref-active="active" ui-sref=".location"><span></span>Location</a>
<a ng-show="!IsAuthenticated" ui-sref-active="active" ui-sref=".account"><span></span>Account</a>
<a ui-sref-active="active" ui-sref=".social"><span></span>Social</a>
</div>

.disabled {
cursor: not-allowed;
opacity: .5;
pointer-events: none;
}
.enabled {
cursor: pointer;
opacity: 1;
pointer-events: all;
}


Check fired:

<a ui-sref="post_add.location" class="btn btn-orange" ng-class="{disabled: addItem_form.$invalid}" ng-click="itemCheck()">Continue <span class="glyphicon glyphicon-circle-arrow-right"></span></a>


JS:

//data checks
$scope.ItemCheckPass = false;
$scope.itemCheck= function(){
if(typeof $scope.AddItem === 'undefined' || $scope.AddItem == null){return false;}
if(typeof $scope.AddItem.title === 'undefined' || $scope.AddItem.title == null){return false;}
if(typeof $scope.AddItem.descr === 'undefined' || $scope.AddItem.descr == null){return false;}
if(typeof $scope.AddItem.category === 'undefined' || $scope.AddItem.category == null){return false;}
if(typeof $scope.AddItem.subcategory === 'undefined' || $scope.AddItem.subcategory == null){return false;}
if(typeof $scope.AddItem.email === 'undefined' || $scope.AddItem.email == null){return false;}
if(typeof $scope.AddItem.price === 'undefined' || $scope.AddItem.price == null){return false;}
$scope.ItemCheckPass = true;
return true;
}


Everything works well. As you can see, I'm trying to change the class of the tag
<a>
, based on a condition, and for unknown reason, the
ng-class
isn't changing the class when the
$scope.ItemCheckPass (boolean)
changes.

What can be a problem?

OR

What is the better way to disable the steps changing for user?

Answer

The problem was that with each state initialization, the variables on controller are renewed.

The solutions is to make routing like this:

    .state('post_add', {
        url: '/post_add',
        templateUrl: '/view/post_wizard/form.html',
        controller: 'postWizardMainController',
        abstract:true
    })
    .state('post_add.item', {
        url: '',
        templateUrl: '/view/post_wizard/form-item.html',
        controller: 'postWizardController'
    })
    .state('post_add.location', {
        url: '/location',
        templateUrl: '/view/post_wizard/form-location.html',
        controller: 'postWizardController'
    })
    .state('post_add.account', {
        url: '/account',
        templateUrl: '/view/post_wizard/form-account.html',
        controller: 'postWizardController'
    })
    .state('post_add.social', {
        url: '/social',
        templateUrl: '/view/post_wizard/form-social.html',
        controller: 'postWizardController'
    })
    .state('post_add.success', {
        url: '/success',
        templateUrl: '/view/post_wizard/form-success.html',
    });

and put the check variables and methods in postWizardMainController.