使用AngularJS动态设置CSS大致有2种思路：

1、通过动态设置class名称

比如先定义2个样式：

.show-true{
    display:block;
}

.show-flase{
    display:none;
}

在某个元素中：

<div class="show-{{temp}}".....

temp为$scope的一个变量，通过设置$scope.temp = true 或 $scope.temp = false来决定temp变量的具体值。

比如：

<!doctype html>



<html ng-app="myApp">



<head>



    <meta charset="UTF-8">



    <title>Untitled Document</title>



    <style>



        .menu-disabled-true{



            color: gray;



        }





        .menu-disabled-false{



            color: red;



        }



    </style>



    <script src="angular.min.js"></script>



    <script>



        var myApp = angular.module("myApp",[]);



        myApp.controller("MyController", function($scope){



            $scope.isDisabled = false;



            $scope.changeState = function(){



                $scope.isDisabled = true;



            };



        });



    </script>



</head>



<body ng-controller="MyController">



    <ul>



        <li class="menu-disabled-{{isDisabled}}" ng-click="changeState()">hello</li>



    </ul>



</body>



</html>




2、使用ng-class


ng-class显示一个对象，比如ng-class="{selected: true}"表示class="selected"。


以下ng-class的字段直接接收bool值。


<!doctype html>



<html ng-app="myApp">



<head>



    <meta charset="UTF-8">



    <title>Untitled Document</title>



    <style>



        .error{



            background-color: red;



        }





        .warning{



            background-color: yellow;



        }



    </style>



    <script src="angular.min.js"></script>



    <script>



        var myApp = angular.module("myApp",[]);



        myApp.controller("MyController",function($scope){



            $scope.isError = false;



            $scope.isWarning = false;





            $scope.showError = function(){



                $scope.messageText = "error";



                $scope.isError = true;



                $scope.isWarning = false;



            };





            $scope.showWarning = function(){



                $scope.messageText = "warning";



                $scope.isError = false;



                $scope.isWarning = true;



            };



        });



    </script>



</head>



<body ng-controller="MyController">





<div ng-class="{error:isError, warning:isWarning}">{{messageText}}</div>



<button ng-click="showError()">显示error</button>



<button ng-click="showWarning()">显示warning</button>





</body>



</html>









以下,ng-class的字段接收一个返回bool类型的表达式。


<!doctype html>



<html ng-app="myApp">



<head>



    <meta charset="UTF-8">



    <title>Untitled Document</title>



    <style>



        .selected{



            background-color: lightgreen;



        }



    </style>



    <script src="angular.min.js"></script>



    <script>







        var myApp = angular.module("myApp",[]);



        myApp.controller("MyController",function($scope){



            $scope.person =[



                {name: 'darren', age: '20'},



                {name: 'jack', age: '23'}



            ];





            $scope.selectPerson = function(rowIndex){



                $scope.selectedRow = rowIndex;



            };



        });



    </script>



</head>



<body>





<table ng-controller="MyController">



    <tr ng-repeat="p in person" ng-click="selectPerson($index)" ng-class="{selected: $index==selectedRow}">



        <td>{{p.name}}</td>



        <td>{{p.age}}</td>



    </tr>



</table>





</body>



</html>









参考资料：<<用AngularJS开发下一代Web应用>>
												


											
AngularJS动态设置CSS的更多相关文章
	

    
								
  1. ng-class 动态设置css
		
    可使用ng-class 动态设置class ,设置disable后,发现ng-click 居然还可以使用,不知什么原因. <li ng-class="{disabled:!first} ...
    
		
    2. 
						
  2. JS动态设置css的几种方式
		
    1. 直接设置style的属性  某些情况用这个设置 !important值无效 如果属性有'-'号,就写成驼峰的形式(如textAlign)  如果想保留 - 号,就中括号的形式  element. ...
    
		
    3. 
						
  3. [原创]webpack动态设置css路径
		
    在程序入口的最上方添加 __webpack_public_path__ = path; //your path //your app start here
    
		
    4. 
						
  4. JS设置CSS样式的几种方式
		
    用JS来动态设置CSS样式,常见的有以下几种 1. 直接设置style的属性  某些情况用这个设置 !important值无效 如果属性有'-'号,就写成驼峰的形式(如textAlign)  如果想保 ...
    
		
    5. 
						
  5. JS设置CSS样式的几种方式【转】
		
    用JS来动态设置CSS样式,常见的有以下几种 1. 直接设置style的属性  某些情况用这个设置 !important值无效 如果属性有'-'号,就写成驼峰的形式(如textAlign)  如果想保 ...
    
		
    6. 
						
  6. jQuery动态设置样式（style、css）
		
    一.jQuery设置css样式 <div style="background-color:#ffffff;padding-left:10px;">测试jQuery动态获 ...
    
		
    7. 
						
  7. 使用 jQuery 基本选择器获取页面元素，然后利用 jQuery 对象的 css() 方法动态设置 ＜span＞ 和 ＜a＞ 标签的样式
		
    查看本章节 查看作业目录 需求说明: 使用 jQuery 基本选择器获取页面元素,然后利用 jQuery 对象的 css() 方法动态设置 <span> 和 <a> 标签的样式 ...
    
		
    8. 
						
  8. js动态设置窗体位置
		
    1设置登录框的js,动态设置高度等 <script> $(document).ready(function () { $() / + "px"); $("in ...
    
		
    9. 
						
  9. angular.element方法汇总以及AngularJS 动态添加元素和删除元素
		
    addClass()-为每个匹配的元素添加指定的样式类名after()-在匹配元素集合中的每个元素后面插入参数所指定的内容,作为其兄弟节点append()-在每个匹配元素里面的末尾处插入参数内容att ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. linux下常用FTP命令 上传下载文件【转】
			
    1. 连接ftp服务器 格式:ftp [hostname| ip-address]a)在linux命令行下输入: ftp 192.168.1.1 b)服务器询问你用户名和密码,分别输入用户名和相应密码 ...
    
			
    2. 
						
  2. 使用Eclipse Memory Analyzer分析Tomcat内存溢出
			
    前言 在平时开发.测试过程中.甚至是生产环境中,有时会遇到OutOfMemoryError,Java堆溢出了,这表明程序有严重的问题.我们需要找造成OutOfMemoryError原因.一般有两种情况 ...
    
			
    3. 
						
  3. springcloud服务安全连接
			
    Spring Cloud可以增加HTTP Basic认证来增加服务连接的安全性. 1.加入security启动器 在maven配置文件中加入Spring Boot的security启动器. <d ...
    
			
    4. 
						
  4. Python学习三|列表、字典、元组、集合的特点以及类的一些定义
			
    此表借鉴于他人 定义 使用方法 列表 可以包含不同类型的对象,可以增减元素,可以跟其他的列表结合或者把一个列表拆分,用[]来定义的 eg:aList=[123,'abc',4.56,['inner', ...
    
			
    5. 
						
  5. sysbench安装及性能测试
			
    现在的压力测试工具各种各样,只要上手好几款功能强大点的而且比较大众化的压力测试工具即可,以下跟大家交流下sysbench的安装和压力测试 sysbench支持以下几种测试模式: 1.CPU运算性能 2 ...
    
			
    6. 
						
  6. Tomcat8 启动中提示 org.apache.catalina.webresources.Cache.getResource Unable to add the resource
			
    Tomcat8 启动过程中提示: org.apache.catalina.webresources.Cache.getResource Unable to add the resource at xx ...
    
			
    7. 
						
  7. flume修改配置文件
			
    flume修改配置文件后,flume进程会自动将配置文件更新至服务中,同时会初始化日志,重新对于metrics进行记录的. 所以拿api做监控的同学要注意这点啦
    
			
    8. 
						
  8. 【LeetCode】74. Search a 2D Matrix
			
    Difficulty:medium  More:[目录]LeetCode Java实现 Description Write an efficient algorithm that searches f ...
    
			
    9. 
						
  9. 把.html转换成.jsp中jqplot画图表不能正常显示，出错的心得
			
    在做这个的时候,明明html中是完全可行的,如下图: 但后缀名改成.jsp后竟出现如下情况: 这太坑爹了吧,我的图呢! 哎,又要自己找代码问题了,无奈! 先给出我还没修改前的代码吧,关于里面的.js, ...
    
			
    10. 
						
  10. 初识thinkphp(4)
			
    这次内容是数据库的使用方法 因为在第一章讲过就是拿index这个文件写的数据库的访问,这次实验我使用文件是系统默认的首页 配置的内容也在那里有提过就不重发戳图了. 数据库按照手册上的建议建了3行的内容 ...
    
			
    11.