Блог

Главная - Вопросы по программированию - показывать div, скрывая другой с помощью ng hide и ng show

показывать div, скрывая другой с помощью ng hide и ng show

#angularjs #ionic-framework

#angularjs #ионный фреймворк

Вопрос:

У меня есть кнопка, при нажатии на которую div исчезает с помощью ng-hide, но я не могу понять, как я могу заставить другой div появляться при нажатии на эту кнопку. Прямо сейчас мой код выглядит так:

 <div class="col text-center"><button class="button b3" ng-click="goEsconder = !goEsconder">
     Ver fotos
   </button></div>
  </div>
  <div class="row" ng-hide="goEsconder">
    <div class="col tipo"><p class="tip">Tipo de espaço:</p><p class="tip2">Escritório</p>
    <p class="tip">Preço:</p><p class="tip2">{{detalhes[1]}}€/mês</p>

    <div class="col tipo"><p class="tip">Condições:</p>
    <p class="tip2">150 m2 de espaço
configurável</p>
</div>

Мой контроллер

 .controller('perfilCtrl', ['$scope', '$stateParams', "detailService",// The following is the constructor function for this page's controller. See https://docs.angularjs.org/guide/controller
// You can include any angular dependencies as parameters for this function
// TIP: Access Route Parameters for your page via $stateParams.parameterName
function ($scope, $stateParams, detailService) {
$scope.detalhes=detailService.data;
$scope.goEsconder = false;
}])

И я хочу, чтобы этот div отображался при нажатии кнопки, а другой div скрывался

   <div class="imagem">
   <img ng-src="http://www.comoditamodulados.com.br/wp-content/uploads/2015/12/executivo_-300x300.jpg" class="img-responsive img-thumbnail">
  </div>

Комментарии:

1. Вы можете использовать несколько ng-hide в своем коде для одной переменной

2. Просто добавьте ng-show="goEsconder" в div, и вы должны быть настроены.

3. Ну, это было легко, спасибо

Ответ №1:

 <div class="imagem" ng-hide="!goEsconder">
   <img ng-src="http://www.comoditamodulados.com.br/wp-content/uploads/2015/12/executivo_-300x300.jpg" class="img-responsive img-thumbnail">
  </div>

Или, как упоминал @Adwaenyth. 

 <div class="imagem" ng-show="goEsconder">
   <img ng-src="http://www.comoditamodulados.com.br/wp-content/uploads/2015/12/executivo_-300x300.jpg" class="img-responsive img-thumbnail">
  </div>