使用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. Identical Binary Tree
			
    Check if two binary trees are identical. Identical means the two binary trees have the same structur ...
    
			
    2. 
						
  2. 在SharePoint 2013里配置Excel Services
			
    配置步骤,请参看下面两篇文章 http://www.cnblogs.com/jianyus/p/3326304.html https://technet.microsoft.com/zh-cn/lib ...
    
			
    3. 
						
  3. JavaScript如何获得input元素value值
			
    转载地址:http://aquarius-zf.iteye.com/blog/605144 在页面中我们最常见的页面元素就是input了,但是我们如何用JavaScript得到网页input中输入的v ...
    
			
    4. 
						
  4. 在内部局域网内搭建HTTPs
			
    在内部局域网内搭建HTTPs 配置环境 Windows版本:Windows Server 2008 R2 Standard Service Pack 1 系统类型:       64 位操作系统 内存 ...
    
			
    5. 
						
  5. About Saliency Object Detection
			
    显著性对象检测综述 详见:http://mmcheng.net/zh/paperreading/ 一.    程明明等人的论文:Salient Object Detection: A Survey(简 ...
    
			
    6. 
						
  6. WebSocket原理说明
			
    WebSocket原理说明 众所周知,Web应用的通信过程通常是客户端通过浏览器发出一个请求,服务器端接收请求后进行处理并返回结果给客户端,客户端浏览器将信息呈现.这种机制对于信息变化不是特别频繁的应 ...
    
			
    7. 
						
  7. 加载JS代码
			
    玩转JS系列之代码加载篇   一开始我们这样写js <script type="text/javascript"> function a(){ console.log( ...
    
			
    8. 
						
  8. php    导出excel文件
			
    out_excel.php <?phperror_reporting(E_ALL);date_default_timezone_set('Asia/Shanghai');require_once ...
    
			
    9. 
						
  9. php    会话控制（理解会话控制的概念）
			
    理解一个概念就需要理解他的背景及产生的原因,这里引入web环境及其http协议. 会话控制产生的背景: http协议是web服务器与客户端相互通信的协议,它是一种无状态协议,所谓无状态,指的是不会维护 ...
    
			
    10. 
						
  10. 001.etcd简介及单节点使用
			
    一 etcd简介 1.1 概述 etcd 是 CoreOS 团队发起的开源项目,是一个管理配置信息和服务发现(service discovery)的项目,它的目标是构建一个高可用的分布式键值(key- ...
    
			
    11.