AngularJS实现动态切换样式的方法分析

本文实例讲述了AngularJS实现动态切换样式的方法。分享给大家供大家参考，具体如下：

AngularJS相比原生的射流研究…或者框架有着很大不同，对于一个简单的鼠标点击不同选项，动态切换样式该怎么实现呢。

本文实现的是点击某个标题，标题字体加粗，并随之切换相应的差异内容，如下（点击推荐或热点)

好的。实现过程

1.超文本标记语言代码

！-推荐或热点标题-div class=' comTitStyle ' div a ng-click=' title click(0)' ng-class=' { ' selected ' : focusinindex==0 } ' class=' selected '推荐/a/div/a ng-click=' title click(1)' ng-class=' { ' selected ' : focus index==1 ' '热点/a /div/div2 .控制器代码。控制器(“新闻Ctrl”，函数($scope) { //定义要聚焦的索引$ scope。focusindex=0；//默认显示推荐板块$ scope . Rechide=false $ scope . Hotide=true $ scope . title click=函数（索引){ $ scope.focusIndex=索引；//点击切换样式if(index==0){ $ scope。rechide=false$ scope . HotId=true } else if(index==1){ $ scope。rechide=true$ scope . HotId=false } } })3。附上包括。挑选在内的半铸钢钢性铸铁(铸造半钢)样式。comTitStyle { width : 16 remheight : 2 rem }。comTitStyle div { display:内联块；宽度： 7.9雷姆；高度： 2毫米垂直对齐： 中间；文本对齐：中心；线高： 2雷姆；}.comTitStyle div a { width : 2.5 rem；高度： 1.9雷姆；显示器：内联块；垂直对齐： 中间；字号：8雷姆；color: # 666666 }。comTitStyle分区.选中{边框-底部： 1px实心# 3BB4C1font-weight:粗体；}4.好了，在浏览器运行试试，放心，没错的！

更多关于AngularJS相关内容感兴趣的读者可查看本站专题： 《AngularJS指令操作技巧总结》 、 《AngularJS入门与进阶教程》 及《AngularJS MVC架构总结》

希望本文所述对大家AngularJS程序设计有所帮助。