AngularJS操控CSS类和样式

阅读更多

        通过AngularJS可以在应用中动态地设置CSS类和样式，只要使用{{}}插值语法把它们进行数据绑定即可。甚至还可以在模板中构造CSS类名和部分匹配方式。

        实例如下：

ControllerCSS.html

	


	

		

			
Stun
			
Fly
			
Start
		
	
	
	
	

menu.css

.menu-disabled-true {
	color: gray;
}

运行结果：打开页面时，Stun是激活的，点击后就置灰了，如下截图

        stun菜单项上的CSS类将会被设置为menu-disabled-加上$scope.isDisabled的值。由于$scope.isDisabled属性的初始值为false，所以拼接出来的结果就是menu-disabled-false。由于这个结果无法匹配到任何CSS样式，所以不会产生任何效果。当$scope.isDisabled被设置为true时，CSS样式类就变成了menu-disabled-true，这样就会调用相应的样式让文本变成灰色。

        当使用插值方式绑定内联样式的时候，这一技术同样适用，例如style="{{someexpression}}"。

        虽然这种方式具有很大灵活性，但是也有一些不利的地方，那就是构造CSS类名时存在一定程度的间接性。虽然在这个小例子里面很容易理解它，但是当需要同时要模板和JavaScript中使用时，它很快就会变得无法维护，进而无法正确的创建CSS。

        正是这个原因，Angular提供了ng-class和ng-style指令。这两个指令都可以接受一个表达式，表达式执行的结果可能是如下取值之一：

        a.表示CSS类名的字符串，以空格分隔

        b.CSS类名数组

        c.CSS类名到布尔值的映射

        如希望在应用头部的固定位置向用户显示错误和警告信息。使用ng-class指令，你可以这样做：

ControllerCSS02.html

	
	


	

		
{{messageText}}
		Simulate Error
		Simulate Warning
	
	
	

menu02.css

.error {
	background-color:red;
}
.warning {
	background-color:yellow;
}

运行结果：

点击“Simulate Error”按钮，效果如下：

点击“Simulate Warning”按钮，效果如下：

        还可以做一些更炫的事情，例如把表格中被选中的行进行高亮显示。比方说一个名录，想把用户点击的那一行进行高亮显示。

        在CSS中，为需要高亮显示的行设置一个样式：

menu03.css

.selected {
	background-color: lightgreen;
}

ControllerCSS03.html

	
	


	

		

			
{{restaurant.name}}
			
{{restaurant.cuisine}}
		
	
	
	

运行效果：

• 
• 大小: 11.4 KB

• 
• 大小: 11.7 KB

• 
• 大小: 15.3 KB

• 
• 大小: 16.3 KB

• 
• 大小: 16.5 KB

• 查看图片附件