在我的 angular.js 学习项目中,我想隐藏一个 div 并在单击按钮时显示另一个 div。
在此代码中,我希望第一个 div 在单击时隐藏(甚至被销毁?),并显示第二个 div。
基本上我想要在我的应用程序中从第 1 页转到第 2 页的用户体验。
我怎样才能做到这一点?
索引.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>
控制器.js
.controller("StartpageCtrl", funcion($scope){
$scope.showstartCard = true;
$scope.showsecondCard = false;
$scope.hideCard = function() {
$scope.showstartCard = false;
$scope.showsecondCard = true;
};
});
当我运行该页面时,我看到“Card 2”,但单击按钮时没有任何反应。
我想看到的是“卡 1”,当我单击按钮时它会切换到“卡 2”......
Solved我忘记添加对 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;
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)