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


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

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

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

            

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

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

            

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

你可能感兴趣的:(angularjs)