Angular Js: Show and Hide

by Nhat Nguyen

HTML

<div ng-app>
    <div ng-controller='DeathrayMenuController'>
        <button ng-click='toggleMenu()'>Toggle Menu</button>
        <ul ng-show='menuState'>
            <li class="menu-disabled-{{isDisabled}}" ng-click='stun()'>Stun</li>
            <li ng-click='disintegrate()'>Disintegrate</li>
            <li ng-click='erase()'>Erase from history</li>
        </ul>
    </div>
</div>

CSS

.menu-disabled-true {
    color: gray;
}

JavaScript

function DeathrayMenuController($scope) {
    $scope.menuState = false;
    $scope.toggleMenu = function () {
        $scope.menuState = !$scope.menuState;
    };
    $scope.stun = function () {
        $scope.isDisabled = 'true';
    };
}