我想在点击链接时改变当前 View 的中间 View 。一个链接是查看 iphone,另一个是查看平板电脑。默认 View 应该是 iphone。除此之外,不应通过单击更改 View 中的任何内容。我不想在 View 之间切换。只需单击链接即可加载 View 。
下面是我试过的html代码。
<div class="mobile-area">
<p>Mobile App</p>
<a class="mobile-icon current-device" href ng-click="iphoneView= !iphoneView"></a>
<a href ng-click="tabletView = !tabletView" class="tablet-icon"></a>
</div>
<div class="mobile-preview" ng-class="{'iphone': iphoneView}">
<div class="mobile-wrapper">
<div class="mobile-simulator">
<me-iphone tmp-url="{{appTemplateUrl}}"></me-iphone>
</div>
</div>
</div>
<div class="mobile-preview" ng-class="{'tablet': tabletView}">
<div class="mobile-wrapper">
<div class="mobile-simulator">
<me-tablet tmp-url="{{appTemplateUrl}}"></me-tablet>
</div>
</div>
</div>
下面是CSS代码。
.iphone {
position: relative;
background: url(../../../../images/iphone-bg.png) no-repeat;
width: 100%;
height: 100%;
padding-top: 58%;
border-radius: 1em;
float: none;
}
.tablet {
position: relative;
background: url(../../../../images/tablet.jpg) no-repeat;
width: 200%;
height: 100%;
padding-top: 58%;
border-radius: 1em;
float: none;
}
我尝试了不同的方法,但没有任何方法适合我。请告诉我一种无需切换到同一 html 页面即可加载 View 的方法。
最佳答案
试试这个:
ng-class="tabletView ? 'tablet' : 'iphone'"
默认为iphone。您根本不需要第二个 iphoneView
变量(如果您只有这两个 View )。
关于html - 如何使用ngclass在angularjs中单击时使用css类切换到另一个 View ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35402787/