Angular - Separating variables for each show and hide element

Question

I am trying to create a custom toggle accordion menu. I want to show and hide individual elements one by one. I have stripped the function down to the nuts and bolts.

I have made attempts to separate variables for each element I want to show and hide. Jsfiddle

This is my markup

<section ng-app="myApp">
  <div ng-controller="accordionCtrl">
   <div class="frq-accordion">
        <div class="panel panel-default">
             <!-- PANEL STARTS HERE-->
            <div ng-click="frqToggle(hiddenToggleOne)" class="panel-heading">
                <div class="panel-title">
                              <span>Some text goes here!</span>
                </div>
            </div><!-- PANEL HEADING ENDS HERE -->
            <div id="collapseOne" ng-class="{isHidden: hiddenToggleOne}" class="panel-collapse">
                <p>Hidden menu is open</p>
            </div>
        </div><!-- PANEL ENDS HERE -->
    </div>
<!-- FRQ ACCORDION CONTAINER ENDS HERE -->

<div class="frq-accordion">
        <div class="panel panel-default">
        <!-- PANEL STARTS HERE-->
            <div ng-click="frqToggle(hiddenToggleTwo)" class="panel-heading">
                <div class="panel-title">
                    <span>Some text goes here!</span>
                </div>
            </div><!-- PANEL HEADING ENDS HERE -->
            <div id="collapseTwo" ng-class="{isHidden: hiddenToggleTwo}" class="panel-collapse">
                <p>Hidden menu is open</p>
            </div>
        </div><!-- PANEL ENDS HERE -->
    </div>
<!-- FRQ ACCORDION CONTAINER ENDS HERE -->

<div class="frq-accordion">
        <div class="panel panel-default">
        <!-- PANEL STARTS HERE-->
            <div ng-click="frqToggle(hiddenToggleThree)" class="panel-heading">
                <div class="panel-title">
                    <span>Some text goes here!</span>
                </div>
            </div><!-- PANEL HEADING ENDS HERE -->
            <div id="collapseThree" ng-class="{isHidden: hiddenToggleThree}" class="panel-collapse">
                <p>Hidden menu is open</p>
            </div>
        </div><!-- PANEL ENDS HERE -->
    </div>
<!-- FRQ ACCORDION CONTAINER ENDS HERE -->

ANGULAR

angular
  .module('myApp')
   .controller('futureCtrl', ['$scope', function($scope){


$scope.hiddenToggleOne = false;
$scope.hiddenToggleTwo = false;
$scope.hiddenToggleThree = false;
$scope.hiddenToggleFour = false;
$scope.hiddenToggleFive = false;

$scope.frqToggle = function (toggleElem) {
    toggleElem = !toggleElem;
}

}]);

Ryan27 · Accepted Answer · 2016-09-29 12:06:31Z

1

In your controller function frqToggle you are just setting the local variable toggleElem, and not modifying your scope variables.

You can dynamically set the scope variables:

$scope.frqToggle = function (toggleElem) {
  $scope[toggleElem] = !$scope[toggleElem];
}

You will then need to modify your ng-click to pass the name of the element rather than the element's value.

answered Sep 29, 2016 at 12:06

Ryan27

4534 silver badges16 bronze badges

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

4 Comments

NewKidOnTheBlock Over a year ago

ng-click="frqToggle()" ?

Ryan27 Over a year ago

ng-click="frqToggle('hiddenToggleOne')" should do the trick. Just need to change the param to a string since if you don't wrap it in single quotes angular will evaluate it and pass the value.

NewKidOnTheBlock Over a year ago

Where I have specified my variables $scope.hiddenToggleOne = false; etc is there a better of doing it ? Just think about if i was create a loop for this block of code i don't want keep calling out my variable in the controller

Ryan27 Over a year ago

If you are rendering these in a loop, then I would use an array on scope to track what is open/closed. You could then call your frqToggle() with the index of the item you want to turn on/off.

Collectives™ on Stack Overflow

Angular - Separating variables for each show and hide element

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related