html – 如何使用ngclass单击angularjs时使用css类切换到另一个视图

我想在单击链接时更改当前视图的中间视图.一个链接是查看 iphone,另一个是查看平板电脑.默认视图应该是iphone.除此之外,视图中的任何内容都不应随点击而改变.我不想在视图之间切换.只需点击链接即可加载视图.

下面是我试过的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页面的方法.

解决方法

试试这个？

<div class="mobile-area">
    <p>Mobile App</p>
    <a class="mobile-icon current-device" href ng-click="iphoneView=true;tabletView=false"></a>
    <a href ng-click="tabletView=true;iphoneView=false" class="tablet-icon"></a>
</div>

<div class="mobile-preview" ng-class="{'iphone': iphoneView,'tablet': tabletView}">
    <div class="mobile-wrapper">
        <div class="mobile-simulator">
            <me-iphone ng-show="iphoneView" tmp-url="{{appTemplateUrl}}"></me-iphone>
            <me-tablet ng-show="tabletView" tmp-url="{{appTemplateUrl}}"></me-tablet>
        </div>
    </div>
</div>

编辑：根据karaxuna’s answer,你可以只使用一个变量

<div class="mobile-area">
    <p>Mobile App</p>
    <a class="mobile-icon current-device" href ng-click="tabletView=false"></a>
    <a href ng-click="tabletView=true" class="tablet-icon"></a>
</div>

<div class="mobile-preview" ng-class="tabletView ? 'tablet' : 'iphone'">
    <div class="mobile-wrapper">
        <div class="mobile-simulator">
            <me-iphone ng-show="!tabletView" tmp-url="{{appTemplateUrl}}"></me-iphone>
            <me-tablet ng-show="tabletView" tmp-url="{{appTemplateUrl}}"></me-tablet>
        </div>
    </div>
</div>