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