AngularJS动态设置CSS

以你之姓@ 2022-03-29 07:45 335阅读 0赞

使用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>

<head>

<title>Untitled Document</title>

<style>

.menu-disabled-true{

color: gray;

}

.menu-disabled-false{

color: red;

}

</style>

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

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

$scope.isDisabled = false;

$scope.changeState = function(){

$scope.isDisabled = true;

};

});

</script>

</head>

<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>

<head>

<title>Untitled Document</title>

<style>

.error{

background-color: red;

}

.warning{

background-color: yellow;

}

</style>

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>

<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>

<head>

<title>Untitled Document</title>

<style>

.selected{

background-color: lightgreen;

}

</style>

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>

</tr>

</table>

</body>

</html>

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

AngularJS动态设置CSS

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关怎么用JS来动态设置CSS样式

相关 webstorm 设置Angularjs智能提示

相关 layui的动态css设置

相关 ionic之AngularJS扩展动态组件

相关 AngularJS之表格设置样式

相关 AngularJS动态切换样式

相关 AngularJS4 如何设置Cookie

相关 AngularJS动态设置CSS

相关 v-for循环中动态设置css样式

相关 js动态设置css样式和标签属性值