Как скрыть div, нажав кнопку? (SOLVED)

В моем проекте обучения angular.js я хочу скрыть один div и показать другой, когда я нажимаю кнопку. В этом коде я хотел бы, чтобы первый div был скрыт при щелчке (или даже уничтожен?) И втором div, который будет показан. В основном я хочу, чтобы пользовательский интерфейс переходил со страницы 1 на страницу 2 в моем приложении. Как это сделать?Как скрыть div, нажав кнопку? (SOLVED)

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

Когда я запускаю страницу я вижу "Card 2" и ничего не происходит, когда я нажимаю на кнопку. То, что я хотел бы видеть, был «Card 1» и для того, чтобы переключиться на «Card 2», как я нажимаю кнопку ...

ОБНОВЛЕНИЕ 10 сентября 23:30 CET Он теперь работает отлично. Я забыл добавить ссылки на controllers.js в app.js angular.module, а также тег script в index.html.

источник

2014-09-10 Tommy Sollén

Вам не хватает ng-controller = "StartpageCtrl"? –

+1 @SteveLang. Вот jsbin с вашим отрывом, прекрасно работающим с Томми. http://jsbin.com/ripekumutowa/1/edit – Bema

Спасибо Bema и @SteveLang, но я не совсем понимаю. Почему вы сказали, что мне не хватает ng-контроллера? У меня было это во внешнем div. Но нормально, на примере Бемы я переместил его в тело. Я посмотрел на ваш код Бема, и я до сих пор не могу получить тот же результат на моем конце. –

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, нажав кнопку? (SOLVED)

ответ

Смежные вопросы