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>

我尝试了不同的方法，但都不管用。请告诉我一种在不切换到同一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>

移动应用

编辑：根据，您只能使用一个变量

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

移动应用

试试这个：

ng-class="tabletView ? 'tablet' : 'iphone'"

默认为iphone。您根本不需要第二个

iphoneView

变量（如果您只有这两个视图）

ng-class="tabletView ? 'tablet' : 'iphone'"