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>

angularjs中ng-class的使用的更多相关文章

  1. AngularJS学习--- AngularJS中XHR(AJAX)和依赖注入(DI) step5

    前言:本文接前一篇文章,主要介绍什么是XHR,AJAX,DI,angularjs中如何使用XHR和DI. 1.切换工具目录 git checkout -f step- #切换分支 npm start ...

  2. AngularJS学习--- AngularJS中的模板template和迭代器过滤filter step2 step3

    1.AngularJS 模板---step2: mvc(Model-View-Controller)模式在后端用的比较多,在前端也是一样的常用; 在AngularJS中,一个视图是模型通过HTML模板 ...

  3. 转: 理解AngularJS中的依赖注入

    理解AngularJS中的依赖注入 AngularJS中的依赖注入非常的有用,它同时也是我们能够轻松对组件进行测试的关键所在.在本文中我们将会解释AngularJS依赖注入系统是如何运行的. Prov ...

  4. (九)通过几段代码，理清angularJS中的$injector、$rootScope和$scope的概念和关联关系

    $injector.$rootScope和$scope是angularJS框架中比較重要的东西,理清它们之间的关系,对我们兴许学习和理解angularJS框架都很实用. 1.$injector事实上是 ...

  5. AngularJS中数据双向绑定(two-way data-binding)

    1.切换工作目录 git checkout step-4 #切换分支,切换到第4步 npm start #启动项目 2.代码 app/index.html Search: <input ng-m ...

  6. 理解AngularJS中的依赖注入

    点击查看AngularJS系列目录 理解AngularJS中的依赖注入 AngularJS中的依赖注入非常的有用,它同时也是我们能够轻松对组件进行测试的关键所在.在本文中我们将会解释AngularJS ...

  7. angularJS中$apply()方法详解

    这篇文章主要介绍了angularJS中$apply()方法详解,需要的朋友可以参考下   对于一个在前端属于纯新手的我来说,Javascript都还是一知半解,要想直接上手angular JS,遇到的 ...

  8. 深入学习AngularJS中数据的双向绑定机制

    来自:http://www.jb51.net/article/80454.htm Angular JS (Angular.JS) 是一组用来开发Web页面的框架.模板以及数据绑定和丰富UI组件.它支持 ...

  9. AngularJS中get请求URL出现跨域问题

    今天早上帮助同学看了一个AngularJS的问题,主要是请求中出现了跨域访问,请求被阻止. 下面是她给我的代码: <html lang="en" ng-app="m ...

  10. AngularJS 中的Promise --- $q服务详解

    先说说什么是Promise,什么是$q吧.Promise是一种异步处理模式,有很多的实现方式,比如著名的Kris Kwal's Q还有JQuery的Deffered. 什么是Promise 以前了解过 ...

随机推荐

  1. Web后门工具WeBaCoo

    Web后门工具WeBaCoo   WeBaCoo是使用Perl语言编写的Web后门工具.渗透测试人员首先使用该工具生成一个后门PHP页面.然后,将该页面上传到目标服务器上.最后,在本地终端直接访问该页 ...

  2. 【BZOJ 2039】 2039: [2009国家集训队]employ人员雇佣 （最小割）

    2039: [2009国家集训队]employ人员雇佣 Time Limit: 20 Sec  Memory Limit: 259 MBSubmit: 1511  Solved: 728 Descri ...

  3. BZOJ1064 NOI2008假面舞会

    挺神的这题,发现只有环和链两种情况 搜索时我们只考虑环的,因为链可以看成找不到分类的环. 当成链时大小是的最大值是各链长的和,最小值是3 当成环时最大值是各环长的gcd,最小值是大于3的最小的ans的 ...

  4. Codeforces 408 E. Curious Array

    $ >Codeforces \space 408 E. Curious Array<$ 题目大意 : 有一个长度为 \(n\) 的序列 \(a\) ,\(m\) 次操作,每一次操作给出 \ ...

  5. AtcoderGrandContest 016 D.XOR Replace

    $ >AtcoderGrandContest \space 016 D.XOR\space Replace<$ 题目大意 : 有两个长度为 \(n\) 的数组 \(A, B\) ,每次操作 ...

  6. Problem C: 深入浅出学算法004-求多个数的最小公倍数

    Description 求n个整数的最小公倍数 Input 多组测试数据,先输入整数T表示组数 然后每行先输入1个整数n,后面输入n个整数k1 k2...kn Output 求k1 k2 ...kn的 ...

  7. web前端 -- onkeydown、onkeypress、onkeyup、onblur、onchange、oninput、onpropertychange的区别

    FROM:http://www.cnblogs.com/svage/archive/2011/11/15/2249954.html onkeydown:按下任何键(字母.数字.系统.tab等)都能触发 ...

  8. UESTC 2015dp专题 H 邱老师选妹子 数位dp

    邱老师选妹子 Time Limit: 20 Sec  Memory Limit: 256 MB 题目连接 http://acm.uestc.edu.cn/#/contest/show/65 Descr ...

  9. Linux知识（6）----VIM

    vi的第一版是由Bill Joy在1978年写成的,当时他是UC Berkeley的学生.后来他共同创建了神奇的Sun公司.vi来源于visual一词,目标是在终端上可视化地模拟文本的编辑,是的更人性 ...

  10. 思科DCHP解决方案

    DHCP功能平时用的不算少,而且本人的几乎所有的DHCP功能都是在交换机上实现的,虽然也可以通过PC实现,而且PC的DHCP Server功能还更完善,比如可以不受DHCP作用域的限制.IP分配情况直 ...