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. Kali Linux缺少ifconfig命令

    Kali Linux缺少ifconfig命令   ifconfig是配置和查看网络的基础命令.在某些Kali Linux版本中,可能会缺少ifconfig命令.这个时候,用户需要手动安装该命令.该命令 ...

  2. Vue 2.0学习（四）计算属性

    {{}}模板内的表达式常用于简单的运算,当运算过长或逻辑复杂时,会难以维护. <div> {{ text.split(',').reverse().join('') }} </div ...

  3. 【BZOJ 4361】 4361: isn （DP+树状数组+容斥）

    4361: isn Time Limit: 10 Sec  Memory Limit: 256 MBSubmit: 218  Solved: 126 Description 给出一个长度为n的序列A( ...

  4. 【离散化】【DFS】Gym - 101617H - Security Badges

    题意:给你一张有向图,每条边有个限制范围,只有权值在限制范围内的人能走这条边,问你权值不超过K的人中,有多少人能从S到T. K很大,因此我们只处理边的范围的上下界这O(m)个权值能否到达,以防万一,还 ...

  5. 【插头DP】BZOJ1814-Formula

    [题目大意] 给出一个m*n的矩阵里面有一些格子为障碍物,求经过所有非障碍格子的哈密顿回路个数. [思路] 最典型的插头DP.分为三种情况: (1)当前格子既没有上插头也没有左插头. 如果下边和右边都 ...

  6. bzoj 3772

    感觉做这种题收获很大. 1.DFS序(广义上)除了用于静态子树操作,也可以用来做点到根的路上某些信息的统计(如点到根的路径上标记了多少个点),如果在加上lca,就可以支持路径的信息查询. 2.树上的可 ...

  7. csv文件导入到mysql

    如何将csv文件导入到mysql数据库呢,方法有很多但最简单粗暴的方法还是用sql语句啦,像下面这样. LOAD DATA LOCAL INFILE 'csv文件路径' INTO TABLE 数据表名 ...

  8. AJAX传递数组

    在前台中Jq代码中中用JSON.stringify()将数组转换成 JSON字符串.在后台用json_decode()将JSON字符串转换成数组. 1.JSON.stringify(value [, ...

  9. 一个iframe注入漏洞，也是微软的 Application["error"] 漏洞

    最近学校进行安全等级评估,有人给我打电话,说我之前写的一个网站存在iframe注入漏洞,页面是error页面.我于是用netsparker扫描了自己的网站,果然发现error页面存在漏洞,我写网站的时 ...

  10. CentOS 6.9/7通过yum安装指定版本的Tomcat

    说明:通过yum好处其实很多,环境变量不用配置,配置文件放在大家都熟悉的地方,通过rpm -ql xxx可以知道全部文件的地方等等. 一.安装Tomcat(8+) // 下载脚本 # git clon ...