AngularJS动态设置CSS

最新推荐文章于 2023-05-26 10:21:35 发布

weixin_34015860

最新推荐文章于 2023-05-26 10:21:35 发布

阅读量951

点赞数

文章标签： javascript ViewUI

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

关注