Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Shawn Hanna
Shawn Hanna
6,949 Points
Posted by Shawn Hanna
Shawn Hanna
6,949 Points

Hiding and showing elements in Angular.js

Hi all,

I've been having some trouble figuring out how to get one button to show and one button to hide, and then swap when clicked. Working in angular.js, below is the snippet of code from the index for the buttons, and then the part of the controller relating to them.

<button name="btnDark" class="widebutton" ng-click="darkMode()" ng-class="{dark: isDark, light: isLight}" ng-show="{{visible}}">Dark</button>
<button name="btnLight" class="widebutton" ng-click="lightMode()" ng-class="{dark: isDark, light: isLight}" ng-hide="{{visible}}">Light</button>

app.controller("CalcController", ["$scope", function($scope) {...
$scope.isDark = false;
$scope.isLight = true;
$scope.visible = true;

  $scope.darkMode = function() {
    $scope.isDark = true;
    $scope.isLight = false;
    $scope.visible = !$scope.visible;

  };
  $scope.lightMode = function() {
    $scope.isDark = false;
    $scope.isLight = true;
    $scope.visible = !$scope.visible;

  };
...}]);

I want to say I'm on the right track, but I can't seem to get either button to show or hide when clicked. They show up initially, so I know {{visible}} is working, but I can't seem to get their status to update.

Any guidance would be appreciated.

Thanks!

(Full code on github)

1 Answer

Ron McCranie
Ron McCranie
7,837 Points
Ron McCranie
Ron McCranie
7,837 Points

I don't know that $scope.visible is necessary, plus in both of your methods you're setting $scope.visible = !$scope.visible so when the method runs, your modifying that property to be the same value. I would just use the true / false values of the dark or light property.

<button name="btnDark" class="widebutton" ng-click="darkMode()" ng-class="{dark: isDark, light: isLight}" ng-show="{{isDark}}">Dark</button>
<button name="btnLight" class="widebutton" ng-click="lightMode()" ng-class="{dark: isDark, light: isLight}" ng-show="{{isLight}}">Light</button>

app.controller("CalcController", ["$scope", function($scope) {...
$scope.isDark = false;
$scope.isLight = true;

  $scope.darkMode = function() {
    $scope.isDark = true;
    $scope.isLight = false;
  };
  $scope.lightMode = function() {
    $scope.isDark = false;
    $scope.isLight = true;
  };
...}]);

or to make it even more simple, you use one property of $scope.theme with a value of either light or dark. Then you run a method of toggleTheme that switches the theme between dark and light, depending on the current value. One property, one method.