html - 如何使用ngclass在angularjs中单击时使用css类切换到另一个 View

Question

我想在点击链接时改变当前 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 的方法。

Answer 1

试试这个:

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

默认为iphone。您根本不需要第二个 iphoneView 变量(如果您只有这两个 View )。