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

概述我想在单击链接时更改当前视图的中间视图.一个链接是查看 iphone,另一个是查看平板电脑.默认视图应该是iphone.除此之外,视图中的任何内容都不应随点击而改变.我不想在视图之间切换.只需点击链接即可加载视图. 下面是我试过的html代码. <div class="mobile-area"> <p>Mobile App</p> < 我想在单击链接时更改当前视图的中间视图.一个链接是查看 iphone,另一个是查看平板电脑.默认视图应该是iphone.除此之外,视图中的任何内容都不应随点击而改变.我不想在视图之间切换.只需点击链接即可加载视图.

下面是我试过的HTML代码.

<div >                <p>Mobile App</p>                <a  href ng-click="iphoneVIEw= !iphoneVIEw"></a>                <a href ng-click="tabletVIEw = !tabletVIEw" ></a>            </div><div  ng->            <div >                <div >                    <me-iphone tmp-url="{{appTemplateUrl}}"></me-iphone>                </div>            </div>        </div>        <div  ng->                <div >                    <div >                        <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 >    <p>Mobile App</p>    <a  href ng-click="iphoneVIEw=true;tabletVIEw=false"></a>    <a href ng-click="tabletVIEw=true;iphoneVIEw=false" ></a></div><div  ng->    <div >        <div >            <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 >    <p>Mobile App</p>    <a  href ng-click="tabletVIEw=false"></a>    <a href ng-click="tabletVIEw=true" ></a></div><div  ng->    <div >        <div >            <me-iphone ng-show="!tabletVIEw" tmp-url="{{appTemplateUrl}}"></me-iphone>            <me-tablet ng-show="tabletVIEw" tmp-url="{{appTemplateUrl}}"></me-tablet>        </div>    </div></div>

总结

以上是内存溢出为你收集整理的html – 如何使用ngclass单击angularjs时使用css类切换到另一个视图全部内容，希望文章能够帮你解决html – 如何使用ngclass单击angularjs时使用css类切换到另一个视图所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。