分类导航

Angularjs 发布时间：2022-04-20 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了angularjs – 如何通过单击按钮隐藏div？，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

在我的angular.js学习项目中,我想隐藏一个div,当我点击一个按钮时显示另一个div.
在这段代码中,我希望第一个div隐藏在点击(甚至销毁？)和第二个div显示.
基本上我想要在我的应用程序中从第1页到第2页的用户体验.
我该如何实现这一目标？ @H_262_8@ @H_262_8@的index.html

@H_262_8@

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

@H_262_8@controllers.js

@H_262_8@

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

    $scope.hideCard = function() {
        $scope.showstartCard = false;
        $scope.showsecondCard = true;
    };
});

@H_262_8@当我运行页面时,我看到“卡2”,当我点击按钮时没有任何反应.
我想看到的是“卡1”并且当我点击按钮时它切换到“卡2”…

@H_262_8@解决了
我忘记在app.js angular.module中添加对controllers.js的引用以及index.html中的脚本标记.它现在工作正常.

解决方法

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