Showing or hiding elements based on variables in controller - Ionic

问题

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?

回答1:

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;
        }
    }
]);

回答2:

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;
  }
}]);

回答3:

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();

回答4:

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

来源：https://stackoverflow.com/questions/31987314/showing-or-hiding-elements-based-on-variables-in-controller-ionic

标签

angularjs

ionic-framework

ionic

ng-show

ng-hide