如何使用 ngclass 在 angularjs 中单击 css class 切换到另一个视图

Question

我想在单击 link 时更改当前视图的中间视图。一个 link 用于查看 iphone，另一个用于查看平板电脑。默认视图应为 iphone。除此之外，不应通过单击更改视图中的任何内容。我不想在视图之间切换。只需单击 link.

加载视图

下面是我试过的 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 页面即可加载视图的方法。

Answer 1

试试这个？

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

Answer 2

试试这个：

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

默认值为 iphone。您根本不需要第二个 iphoneView 变量（如果您只有这两个视图）。

如何使用 ngclass 在 angularjs 中单击 css class 切换到另一个视图

how to switch to another view using css class on click in angularjs using ngclass

html

css

angularjs

ng-class