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

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

Answer 4

您也可以使用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＆amp; ng-if是ng-show将使元素保持在DOM中，但是ng-if会相反

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

4 个答案: