angular 学习笔记

1.鼠标移入事件

angular 学习笔记

angular 学习笔记

不会弄动态图上来,只好截图了= =

大致就是这个样子,鼠标移入微博或者微信的框框里,就切换到相应的样式类名、图片、文字

原理:主要是做判断,判断true||false,然后根据它的布尔值来动态改变元素样式

html代码如下

绿色标记字体  属于写好了脚本之后注入的依赖,现在可不看

1 <div id="switch" switch=""> //将写好的依赖注入进去 2 <button class="switch" ng-class="isWeixin?\'off\':\'on\'" id="micro-blog">社区微博</button> //ng-class=\'判断isWeixin的布尔值为true还是false?\'true添加类名为off\':\'false添加类名为on\'\'; 3 <button class="switch" ng-class="isWeixin?\'on\':\'off\'" id="we-chat">官方微信</button> //ng-class=\'判断isWeixin的布尔值为true还是false?\'true添加类名为on\':\'false添加类名为off\'\';
4<a ng-href="{{isWeixin? \'\' : \'http://weibo.com/u/5640567447\'}}" target="_blank"> //ng-href=\'判断isWeixin的布尔值为true还是false?\'true地址为空\':\'false地址为\'\';
5<img ng-src="{{isWeixin? \'http://image.cheerby.cn/appImage/web/QRcode.jpg\' : \'http://image.cheerby.cn/appImage/web/weibocode.png\'}}"> //ng-src=\'判断isWeixin的布尔值为true还是false?\'\'true图片地址为xxx\':\'false图片地址为\'xxx\';
6</a>
7<p id="switch-msg"ng-bind="isWeixin? \'扫描关注八点到微信\': \'点击或扫描关注八点到微博\'"></p> //ng-bind=\'判断isWeixin的布尔值为true还是false?\'ture绑定的文字为xxx微信\':\'false绑定的文字为xxx微博\'\'
8</div>

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zzgffz.html