如何通過單擊按鈕隱藏div？（已解決）

在我的angular.js學習項目中，我想隱藏一個div並在單擊按鈕時顯示另一個div。在這段代碼中，我希望第一個div在點擊時被隱藏（甚至被銷燬？），第二個div將被顯示。基本上我想要在我的應用程序中從第1頁到第2頁的用戶體驗。我該如何做到這一點？如何通過單擊按鈕隱藏div？（已解決）

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

當我跑我看到的頁面，當我點擊按鈕「卡2」，並沒有任何反應。我想看到什麼是「卡1」，併爲它切換到「卡2」作爲我按一下按鈕......

UPDATE 9月10日23:30 CET 現在工作得很好。我忘記了在app.js angular.module中添加對controllers.js的引用以及index.html中的腳本標記。

來源

2014-09-10 Tommy Sollén

你是否缺少ng-controller =「StartpageCtrl」？ – 2014-09-10 15:19:24

+1 @SteveLang。這裏有一個jsbin，你的代碼片段工作得很好湯米。 http://jsbin.com/ripekumutowa/1/edit – Bema 2014-09-10 15:22:57

感謝貝瑪和@SteveLang，但我不太明白。你爲什麼說我錯過ng控制器？我在外面的分區。但是好的，按照Bema的例子，我把它移到了身體上。我看着你的代碼貝馬，我仍然無法在我的結尾得到相同的結果。 – 2014-09-10 16:27:09

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

來源

2016-05-25 20:32:39

如果您正在尋找切換，那麼此代碼可能會有所幫助，因爲不需要任何額外的CSS或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>

我在研究Angular-Ionic項目時已經想通了。

來源

2016-08-02 05:09:33 Syed

如何通過單擊按鈕隱藏div？ （已解決）

回答

相關問題

如何通過單擊按鈕隱藏div？（已解決）