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

Question

I want to change the middle view of the current view when I click on the links. one link is for viewing the iphone, and the other is for viewing the tablet. The default view should be iphone. In addition, nothing should be changed with a click. I do not want to switch between views. Just download the view by clicking on the link.

Below is the html code I tried.

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

Below is the css code.

.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;
    }

I tried different methods, but nothing works for me. Please tell me how to download views without switching to the same html page.

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>

EDIT: karaxuna

<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 ( 2 ).