CODEWITHSUNDEEP
angularjs
Chris Tarasovs
Chris Tarasovs

Reputation: 695

Angular 1.5 get variable from menu and set it to true

angular 1.5

I'm creating a menu that on ng-click= i am getting the variable and than on ng-class setting that variable to true for the menu and the content.

Goal is on click to add/remove an active class to the parent and to the content div.

can't get my head around this one

<div ng-controller="myCtrl">
<ul>
  <li class="animate" ng-class="{activelist: fonts ==!hidden }">
  <a ng-click="activeMenu('fonts')" class="nav-icon">
                         menu font
  </a>
</li>
  <li class="animate" ng-class="{activelist: edit ==!hidden }">
  <a ng-click="activeMenu('edit')" class="nav-icon">
                         menu edit
  </a>
</li>
<ul>
<div class="">
<div class="fonttext" ng-class="{activelist: fonts ==!hidden }"></div>
<div class="edittext" ng-class="{activelist: edit ==!hidden }" ></div>
</div>
</div>


<script>
var myapp = angular.module('app', []);

myapp.controller('myCtrl', function($scope){
  $scope.activeMenu = function (menuvar){
//getting the variable that gets passed via func
$scope.variable = menuvar;

// set the variable to be true no working
$scope.menuvar  = true;

  }

});
</script>

Upvotes: 0

Views: 79

Answers (1)

ssc-hrep3
ssc-hrep3

Reputation: 16079

You can set a variable directly in ng-click to true. This variable can then be used in ng-class to dynamically add or remove classes. Here is an example:

<li class="animate" ng-class="{'activelist': fonts }">
    <a ng-click="fonts = !fonts" class="nav-icon"></a>
</li>
<li class="animate" ng-class="{'activelist': edit }">
    <a ng-click="edit = !edit" class="nav-icon"></a>
</li>

You can also set the variable in the controller:

HTML:

<li class="animate" ng-class="{'activelist': menu.fonts }">
    <a ng-click="switchMenu('fonts')" class="nav-icon"></a>
</li>
<li class="animate" ng-class="{'activelist': menu.edit }">
    <a ng-click="switchMenu('edit')" class="nav-icon"></a>
</li>

Controller:

$scope.menu = {};
$scope.switchMenu = function(selectedMenu) {
    $scope.menu[selectedMenu] = !$scope.menu[selectedMenu];
};

Upvotes: 1

Related Questions