zoukankan      html  css  js  c++  java
  • angularjs中ng-class的使用

    1、方法一 通过数据的双向绑定(不推荐)

    <!DOCTYPE html>
    <html ng-app="myApp">
    <head>
    <meta charset="utf-8">
    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
    <style>
    .sky {
        color:white;
        background-color:lightblue;
        padding:20px;
    }
    .tomato {
        background-color:coral;
        padding:40px;
    }
    </style>
    </head>
    <body ng-controller="ctrl">
    
    <p>选择一个类:</p>
    
    <input type="button" value="天空色" ng-click="clickEvent1()" />
    <input type="button" value="番茄色" ng-click="clickEvent2()" />
    
    <div class="{{class1}}">
      <h1>Welcome Home!</h1>
      <p>I like it!</p>
    </div>
    
    <script type="text/javascript">
    var myApp = angular.module('myApp',[]);
    myApp.controller('ctrl', function($scope){
        $scope.clickEvent1 = function() {
            $scope.class1 = "sky";
        }
        $scope.clickEvent2 = function() {
            $scope.class1 = "tomato";
        }    
    });
    </script>
    
    </body>
    </html>

    2、方法二 对象数组

    <!DOCTYPE html>
    <html ng-app="myApp">
    <head>
    <meta charset="utf-8">
    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
    <style>
    .sky {
        color:white;
        background-color:lightblue;
        padding:20px;
    }
    .tomato {
        background-color:coral;
        padding:40px;
    }
    </style>
    </head>
    <body ng-controller="ctrl">
    
    <p>选择一个类:</p>
    
    <input type="button" value="天空色" ng-click="clickEvent1()" />
    <input type="button" value="番茄色" ng-click="clickEvent2()" />
    
    <div ng-class="{'class1':'sky','class2':'tomato'}[inputClass]">
      <h1>Welcome Home!</h1>
      <p>I like it!</p>
    </div>
    
    <script type="text/javascript">
    var myApp = angular.module('myApp',[]);
    myApp.controller('ctrl', function($scope){
        $scope.clickEvent1 = function() {
            $scope.inputClass = 'class1';
        }
        $scope.clickEvent2 = function() {
            $scope.inputClass = 'class2';
        }    
    });
    </script>
    
    </body>
    </html>

    3、方法三 对象key/value

    <!DOCTYPE html>
    <html ng-app="myApp">
    <head>
    <meta charset="utf-8">
    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
    <style>
    .sky {
        color:white;
        background-color:lightblue;
        padding:20px;
    }
    .tomato {
        background-color:coral;
        padding:40px;
    }
    </style>
    </head>
    <body ng-controller="ctrl">
    
    <p>选择一个类:</p>
    
    <input type="button" value="天空色" ng-click="clickEvent1()" />
    <input type="button" value="番茄色" ng-click="clickEvent2()" />
    
    <div ng-class="{'sky':sky,'tomato':tomato}">
      <h1>Welcome Home!</h1>
      <p>I like it!</p>
    </div>
    
    <script type="text/javascript">
    var myApp = angular.module('myApp',[]);
    myApp.controller('ctrl', function($scope){
        $scope.clickEvent1 = function() {
            $scope.sky = true;
            $scope.tomato = false;
        }
        $scope.clickEvent2 = function() {
            $scope.sky = false;
            $scope.tomato = true;
        }    
    });
    </script>
    
    </body>
    </html>
  • 相关阅读:
    普通百姓如何应对通货膨胀
    经济
    将到来的战略转变:移动 Web 还是移动 Apps?
    ASP.Net 第一天笔记 MVC 控制器与视图数据传递注意事项
    关于阿里云 ETC服务器 端口开放问题
    .net 委托 +lamda表达式
    de4Dot用法 解决 .net程序 reflecter反编译 “索引超出了数组界限”问题
    fastReport.net 初了解
    关于JQuery Ajax 跨域 访问.net WebService
    JQuery AJAX 通过一般处理程序 取列表
  • 原文地址:https://www.cnblogs.com/modou/p/5868127.html
Copyright © 2011-2022 走看看