angular中的ng-class多条件判断的用法

最新推荐文章于 2023-06-03 14:38:51 发布

海蓝树

最新推荐文章于 2023-06-03 14:38:51 发布

阅读量3k

点赞数 1

分类专栏： Angular

Angular 专栏收录该内容

44 篇文章

订阅专栏

转载： https://blog.youkuaiyun.com/m0_37885651/article/details/79819628

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
        <style type="text/css">
            .red{  
                width: 400px;  
                height: 80px;
                background: red;  
            } 
            .green{  
                width: 400px; 
                height: 80px;
                background: green; 
            }
            .blue{
                width: 400px; 
                height: 80px;
                background: blue; 
            }
            .btn{
                width: 100px;
                height: 30px;
                line-height: 30px;
                text-align: center;
            }
        </style>
    </head>
    <body ng-app="myApp">
        <div ng-controller="testCtr">
            <!--1.直接加变量     这个没什么用，了解就可以-->

            <div ng-class="oneClass">寂寞来了怎么办</div>

            <button type="button" class="btn" ng-click="changeClass1()">改变样式1</button>

            <!--2.根据变量的布尔值  判断  改变class-->

            <div ng-class="{'red':num,'green':!num}">寂寞来了怎么办</div>

            <button type="button" class="btn" ng-click="changeClass2()">改变样式2</button>

            <!--3.常用，根据变量的值,值自定义,实现class改变-->

            <div ng-class="{1:'red',2:'green',3:'blue'}[stateNum]">寂寞来了怎么办</div>

            <button type="button" class="btn" ng-click="changeClass3()">红色</button>

            <button type="button" class="btn" ng-click="changeClass4()">绿色</button>

            <button type="button" class="btn" ng-click="changeClass5()">蓝色</button>
        </div>
    </body>
    <script type="text/javascript">
        var app = angular.module('myApp',[]);
        app.controller('testCtr',function($scope){
            //初始定义变量
            //1.
            $scope.oneClass = 'red';
            $scope.changeClass1 = function(){
                $scope.oneClass = 'green';
            }
           //初始定义变量
            //2.
            $scope.num = true;  
             $scope.changeClass2 = function(){
                $scope.num = !$scope.num;
            }
            //初始定义变量 
            //3.ng-class多条件状态值判断
            $scope.stateNum = 1;
            $scope.changeClass3 = function(){
                 $scope.stateNum = 1;
            }
            $scope.changeClass4 = function(){
                 $scope.stateNum = 2;
            }
            $scope.changeClass5 = function(){
                 $scope.stateNum = 3;
            }
       })
    </script>
</html>