angular ng-class change without click

Question

I've a trouble with ng-class. I want to change the boolean value to control ng-class but this value is setted in async mode and view file is just loaded.

this is .html view

<li ng-class="{active: isPageView('media')}">
                <div class="pointer" ng-show="isPageView('media')">
                    <div class="arrow"></div>
                    <div class="arrow_border"></div>
                </div>
                <a ng-class="{true: 'dropdown-toggle', false: ''}[disabled]" href="">
                    <i class="icon-camera-retro"></i>
                    <span>Media</span>
                    <i class="icon-chevron-down"></i>
                </a>
                <ul class="submenu">
                    ...........
                </ul>
            </li>

and this is part of controller

$scope.init = function(){
        _.mixin(_.str.exports());
        $scope.disabled = true;
        $rootScope.emptyCompose();
        var localstorage = localStorageService.get('Userprofiles');
        var allExpired = true;
        if (localstorage) {
            $rootScope.userprofiles = localstorage;
            _.each($rootScope.userprofiles, function(userprofile){
                if(moment().isBefore(moment.unix(userprofile.expireTime))){
                    allExpired = false;
                }
            });
            if(allExpired){
                $scope.disabled = ! $scope.disabled;
                $rootScope.modalInstance = $modal.open({
                    templateUrl: 'views/composebilling.html',
                    controller: 'BillingCtrl',
                    keyboard: false,
                    backdrop: 'static'
                });
            }
        }else {
            Index.query(function(userprofiles) {
                $rootScope.userprofiles = userprofiles;
                localStorageService.add('Userprofiles', userprofiles);
                _.each($rootScope.userprofiles, function(userprofile){
                    if(moment().isBefore(moment.unix(userprofile.expireTime))){
                        allExpired = false;
                    }
                });
                if(allExpired){
                    $scope.disabled = ! $scope.disabled;
                    $rootScope.modalInstance = $modal.open({
                        templateUrl: 'views/composebilling.html',
                        controller: 'BillingCtrl',
                        keyboard: false,
                        backdrop: 'static'
                    });
                }
            });
        }

If $scope.disabled is setted without query on server all fire well, otherwise I've trouble

MBielski · Accepted Answer · 2014-06-28 15:09:50Z

1

You are using ng-class with isPageView('media') yet that function is not in the code sample you provided. If anything is dependant upon $scope.disabled I don't see it. Also, this ng-class statement is written incorrectly:

<a ng-class="{true: 'dropdown-toggle', false: ''}[disabled]" href="">

It should be written something like this:

<a ng-class="{'dropdown-toggle': true-condition, 'disabled': false-condition}" href="">

... where true-condition is some expression that will evaluate to TRUE and false-condition is some expression that will evaluate to FALSE. Always setting those to TRUE and FALSE is useless because you can do that without ng-class. Having a CSS class named true or false is just bad code.

answered Jun 28, 2014 at 15:09

MBielski

6,6103 gold badges35 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

angular ng-class change without click

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related