Showing or hiding elements based on variables in controller - Ionic

Question

For all I know this might be more an AngularJS issue than an Ionic specific one. I have a button in one of my views:

<button class="button button-clear button-block button-positive" ui-sref="register">
    Register
 </button>

And in my controller I have this variable that I get from local storage that is either true or false and has to be hidden depending that the value is:

app.controller('loginController', ['$scope', '$localstorage',
  function($scope, $localstorage) {

  // Check if the user has already requested a register, and if true, hide
  // the 'Register' button
  if ($localstorage.get("registrationRequested", false) === true) {
    // How do I do this?
  }

}]);

Now the first question probably is, is it even a best practice to manipulate the dom like that from my controller? And if not, where and how do I do it? If its' fine doing it in my controller, then how do I reference that button and hide it?

score 9 · Accepted Answer · edited Aug 13 '15 at 12:06

9

Add a ng-hide directive to your button tag:

<button ng-hide=registered class="button button-clear button-block button-positive" ui-sref="register">
    Register
</button>

In your JS file, declare this value in your $scope to false and set it to true to hide the button:

app.controller('loginController', ['$scope', '$localstorage',
    function($scope, $localstorage) {
        $scope.registered = false;

        // Check if the user has already requested a register, and if true, hide
        // the 'Register' button
        if ($localstorage.get("registrationRequested", false) === true) {
            $scope.registered = true;
        }
    }
]);

edited Aug 13 '15 at 12:06

MHX

1,581
2
21
31

answered Aug 13 '15 at 11:49

Erazihel

7,295
6
30
53

Whoa! Thanks! As a quick question, is it safe to say that all the directives and features that are available in Angular is also available in Ionic? I'm kinda new to this as I'm sure you can tell.. – Aug 13 '15 at 11:51
Yes, that is safe to say. – MHX Aug 13 '15 at 12:05

score 3 · Answer 2 · answered Aug 13 '15 at 11:52

do as following :

<button class="button button-clear button-block button-positive" ui-sref="register" ng-show='showBtn'>
Register

in controller :

app.controller('loginController', ['$scope', '$localstorage',
  function($scope, $localstorage) {
  if ($localstorage.get("registrationRequested", false) === true) {
     $scope.showBtn = true;
  }
  else{
     $scope.showBtn = false;
  }
}]);

score 0 · Answer 3 · edited Oct 04 '16 at 09:35

0

You should use data-ng-hide to hide or show. After setting it to true or false you have to apply the scope settings like this : $scope.$apply();

edited Oct 04 '16 at 09:35

krampstudio

3,519
2
43
63

answered Oct 04 '16 at 07:32

Ahmad Ayyaz

774
8
25

score -1 · Answer 4 · answered Aug 13 '15 at 12:47

you can use ng-if also to show the button as:

<button class="button button-bar button-positive" ng-if="resgisterBtn" ui-sref="register">Register</button>

in controller:

 app.controller('loginController', ['$scope', '$localstorage',
      function($scope, $localstorage) {
    if ($localstorage.get("registrationRequested", false) === true) {
         $scope.resgisterBtn = true;
      }
      else{
         $scope.resgisterBtn = false;
      }
    }]);

The difference between ng-show & ng-if is ng-show will keep the element alive in DOM but ng-if will do opposite

Showing or hiding elements based on variables in controller - Ionic

4 Answers4

Linked