根据控制器中的变量显示或隐藏元素 - Ionic

Question

据我所知，这可能更像是一个 AngularJS 问题，而不是 Ionic 特有的问题。我的其中一个视图中有一个按钮：

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

在我的控制器中，我有这个从本地存储中获取的变量，它是真或假，必须隐藏，具体取决于值是：

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?
  }

}]);

现在第一个问题可能是，像从我的控制器那样操纵 dom 是否是最佳实践？如果没有，我在哪里以及如何做？如果它在我的控制器中做得很好，那么我该如何引用该按钮并将其隐藏？

Answer 1

将 ng-hide 指令添加到您的按钮标签：

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

在您的 JS 文件中，将 $scope 中的此值声明为 false 并将其设置为 true 以隐藏按钮：

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

Answer 2

做如下：

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

在控制器中：

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

Answer 3

您也可以使用 ng-if 将按钮显示为：

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

在控制器中：

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

ng-show 和 ng-if 之间的区别在于 ng-show 将使元素在 DOM 中保持活动状态，而 ng-if 则相反

Answer 4

您应该使用 data-ng-hide 来隐藏或显示。将其设置为 true 或 false 后，您必须像这样应用范围设置： $scope.$apply();

根据控制器中的变量显示或隐藏元素 - Ionic

Showing or hiding elements based on variables in controller - Ionic

angularjs

ng-show

ionic-framework

ng-hide

ionic