Отображение или скрытие элементов на основе переменных в контроллере — Ionic

Насколько я знаю, это может быть больше проблема 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?
  }

}]);

Теперь первый вопрос, вероятно, заключается в том, является ли вообще лучшей практикой манипулировать домом с моего контроллера? А если нет, то где и как это сделать? Если это нормально делать в моем контроллере, то как мне сослаться на эту кнопку и скрыть ее?


ionic-framework angularjs ng-show ng-hide ionic
person Community    schedule 13.08.2015    source источник

Ответы (4)


arrow_upward
9
arrow_downward

Добавьте директиву ng-hide в тег кнопки:

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

В своем JS-файле объявите это значение в $scope to 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;
        }
    }
]);
person Erazihel    schedule 13.08.2015
comment
Вау! Спасибо! В качестве быстрого вопроса: можно ли с уверенностью сказать, что все директивы и функции, доступные в Angular, также доступны в Ionic? Я новичок в этом, как я уверен, вы можете сказать .. - person ; 13.08.2015
comment
Да, это можно сказать с уверенностью. - person mhx; 13.08.2015

arrow_upward
3
arrow_downward

сделать следующим образом:

<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;
  }
}]);
person Juned Lanja    schedule 13.08.2015

arrow_upward
0
arrow_downward

Вы должны использовать data-ng-hide, чтобы скрыть или показать. После установки его на true или false вы должны применить настройки области следующим образом: $scope.$apply();

person Ahmad Ayyaz    schedule 04.10.2016

arrow_upward
-1
arrow_downward

вы также можете использовать 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 сделает наоборот.

person Anil kumar    schedule 13.08.2015