angularjs - mostrar - ¿Cómo ocultar un div haciendo clic en un botón?(SOLUCIONADO)

ocultar div angular 6

Question

En mi proyecto de aprendizaje angular.js quiero ocultar un div y mostrar otro cuando hago clic en un botón. En este código, me gustaría que el primer div se oculte al hacer clic (¿o incluso que se destruya?) Y que se muestre el segundo div. Básicamente, quiero que la experiencia del usuario pase de la página 1 a la página 2 en mi aplicación. ¿Cómo hago que esto suceda?

Index.html

 <ion-content ng-controller="StartpageCtrl">
<div class="list card" id="startCard" ng-show="showstartCard">
<div class="item item-image item item-text-wrap">
Card 1
</div>
</div>
<div class="list card" id="secondCard" ng-show="showsecondCard">
<div class="item item-image item item-text-wrap">
Card 2
</div>
</div>
<button ng-click="hideCard()" class="button button-full button-calm button icon-right ion-chevron-right">
Start now
</button>
</ion-content>

controllers.js

.controller("StartpageCtrl", funcion($scope){
$scope.showstartCard = true;
$scope.showsecondCard = false;
$scope.hideCard = function() {
$scope.showstartCard = false;
$scope.showsecondCard = true;
};
});

Cuando ejecuto la página, veo "Tarjeta 2" y no sucede nada cuando hago clic en el botón. Lo que quería ver era "Tarjeta 1" y para cambiar a "Tarjeta 2" cuando hago clic en el botón ...

ACTUALIZACIÓN SEP 10 23:30 CET Funciona bien ahora. Me olvidé de agregar referencias a controllers.js en app.js angular.module, así como a la etiqueta de script en index.html.

Answer 1

Si está buscando alternar, este código podría ser útil ya que no es necesario tener funciones adicionales de CSS o JS.

<button ng-click="isDetailOpen = !isDetailOpen"
ng-class="!isDetailOpen ? ''ion-ios-arrow-down'' : ''ion-ios-arrow-up''"
class="button button-clear button-positive icon-right">
<span ng-show="!isDetailOpen">More Detail</span>
<span ng-show="isDetailOpen">Less Detail</span>
</button>
<div ng-show="isDetailOpen">
<p>Per ad ferri dicta, omnis laudem dicunt duo an. Ex pri solum definitiones.</p>
</div>

Lo descubrí mientras trabajaba en el proyecto Angular-Ionic.

Answer 2

Using angular:
HTML file:
<td><a href="#" ng-click="showDetails =! showDetails">Source Doc..</a>
<div id="mydiv" ng-show="showDetails">
<div id="mydiv-container">
<div id="mydiv-content">
<a href="#" ng-click="showDetails =! showDetails">Close</a>
<br>
hello
</div>
</div>
</div>
</td>
css file:
body {
height: 100%;
background-color: #F0F0F0;
font-family: Arial, sans-serif;
}
#mydiv {
width: 100%;
height: 100%;
overflow: hidden;
left: 100px;
top: 150px;
position: absolute;
opacity: 0.95;
}
#mydiv-container {
margin-left: auto;
margin-right: auto;
}
#mydiv-content {
width: 70%;
padding: 20px;
background-color: white;
border: 1px solid #6089F7;
}
a {
color: #5874BF;
text-decoration: none;
}
a:hover {
color: #112763;
}