一、ng-class
<!DOCTYPE HTML> <html ng-app='myApp'> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="angular.min.js"></script> <style type="text/css"> .red{ background:red;} .yellow{ color:yellow;} </style> <script> var m1=angular.module('myApp',[]); m1.controller('Aaa',['$scope',function($scope){ $scope.text='hellow'; }]); </script> <title>无标题文档</title> </head> <body> <div ng-controller="Aaa"> <div ng-class="{red:true,yellow:true}">{{text}}</div> </div> </body> </html>
二、ng-style
<!DOCTYPE HTML> <html ng-app='myApp'> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="angular.min.js"></script> <style type="text/css"> .red{ background:red;} .yellow{ color:yellow;} </style> <script> var m1=angular.module('myApp',[]); m1.controller('Aaa',['$scope',function($scope){ $scope.text='hellow'; }]); </script> <title>无标题文档</title> </head> <body> <div ng-controller="Aaa"> <div ng-style="{background:'red',color:'yellow'}">{{text}}</div> </div> </body> </html>
<!DOCTYPE HTML> <html ng-app='myApp'> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="angular.min.js"></script> <style type="text/css"> .red{ background:red;} .yellow{ color:yellow;} </style> <script> var m1=angular.module('myApp',[]); m1.controller('Aaa',['$scope',function($scope){ $scope.text='hellow'; $scope.style="{background:'red',color:'yellow'}" }]); </script> <title>无标题文档</title> </head> <body> <div ng-controller="Aaa"> <div ng-style="{{style}}">{{text}}</div> </div> </body> </html>
三、ng-href、ng-src、ng-attr-(suffix)