CODEWITHSUNDEEP
angularjstoggle
RobSeg
RobSeg

Reputation: 1035

ng-click toggle only works on first click

I want to toggle a boolean by click event using Angular. This is my the code

<div class="nav_mobile" ng-click="mobilestatus.navActive = (mobilestatus.navActive == false) ? true : false">
    <a href="" class="gradient-menu"></a>
</div>

<nav>
    <ul class="nav_mobile_list" ng-class="{active: mobilestatus.navActive}">
        <li><a ui-sref="about" ng-click="mobilestatus.navActive = false">About</a></li>
        <li><a ui-sref="contact" ng-click="mobilestatus.navActive = false">Contact</a></li>
    </ul>
</nav>

The controller looks like this

angular.module('app').controller('NavCtrl', function ($scope){
   $scope.mobilestatus = {navActive: false};
});

I also tried other shorthand notations. The initial value of navActive is false. The ng-click on nav_mobile makes the navActive attribute true the first time, but when clicking again, it doesn't return back to false. When clicking on the li items, the navActive does return back to false. Any suggestion is appreciated.

Upvotes: 0

Views: 895

Answers (2)

Mike Kor
Mike Kor

Reputation: 876

Try this statement

ng-click="mobilestatus.navActive = !mobilestatus.navActive"

EDIT

If you have no idea of whats going on inside your code try to debug it. Use function call instead of angular's DOM expression and log output into console. Also you can use breakpoints.

HTML

ng-click="toggle()"

Controller

$scope.toggle = function toggle() { 
    $scope.mobilestatus.navActive = !$scope.mobilestatus.navActive;  

    console.log('Status is ' + $scope.mobilestatus.navActive); 
};

You will see if this code is executable and $scope.mobilestatus is available to html part.

EDIT

Here is plunker

Upvotes: 1

Diana R
Diana R

Reputation: 1174

Check this solution:

<div class="nav_mobile" ng-click="mobilestatus.navActive = !mobilestatus.navActive">
    <a href="" class="gradient-menu">Test- {{mobilestatus.navActive}}</a>
  </div>

  <nav>
    <ul ng-class="{'active': mobilestatus.navActive, 'inactive': mobilestatus.navActive}">
      <li><a ui-sref="about" ng-click="mobilestatus.navActive = !mobilestatus.navActive">About</a></li>
      <li><a ui-sref="contact" ng-click="mobilestatus.navActive = !mobilestatus.navActive">Contact</a></li>
    </ul>
  </nav>

Upvotes: 0

Related Questions