[email protected]浅谈class与Ng-Class的应用

1、angularjs的表达式是可以写在class里面动态改变其值的,写法如下:

□、CSS1.html:

<!doctype html>
<html ng-app="MyCSSModule">

<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="CSS1.css">
</head>

<body>
    <div ng-controller="CSSCtrl">
        <p class="text-{{color}}">测试CSS样式</p>                                           //注意这里的class="text-{{color}}"这个class写法,text-后面的angular表达式变量
        <button class="btn btn-default" ng-click="setGreen()">绿色</button>
    </div>
</body>
<script src="js/angular-1.3.0.js"></script>
<script src="CSS1.js"></script>

</html>

□、CSS1.css:

.text-red {
    background-color: #ff0000;
}
.text-green {
    background-color: #00ff00;
}

□、CSS1.js:

var myCSSModule = angular.module(‘MyCSSModule‘, []);
myCSSModule.controller(‘CSSCtrl‘, [‘$scope‘,
    function($scope) {
        $scope.color = "red";
        $scope.setGreen = function() {                           //定义一个setGreen()方法,点击调用这个方法改变color的值,平谈无奇就这么简单
            $scope.color = "green";
        }
    }
]);

2、上面的例子改造一下,用ng-class,写法如下:

□、NgClass.html:

<!doctype html>
<html ng-app="MyCSSModule">

<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="NgClass.css">
</head>

<body>
    <div ng-controller=‘HeaderController‘>
        <div ng-class=‘{error: isError, warning: isWarning}‘>{{messageText}}</div>                //注意ng-class=‘{error: isError, warning: isWarning}‘的写法,后面的表达式意为:

当isError为true时,调用error样式类,当isWarning为true时,调用warning样式类
        <button ng-click=‘showError()‘>Simulate Error</button>
        <button ng-click=‘showWarning()‘>Simulate Warning</button>
    </div>
</body>
<script src="js/angular-1.3.0.js"></script>
<script src="NgClass.js"></script>

</html>

□、NgClass.css:

.error {
    background-color: red;
}
.warning {
    background-color: yellow;
}

□、NgClass.js:

var myCSSModule = angular.module(‘MyCSSModule‘, []);
myCSSModule.controller(‘HeaderController‘, [‘$scope‘,
    function($scope) {
        $scope.isError = false;                                              
        $scope.isWarning = false;                                                       //两个标记变量默认状态下都为false
        $scope.showError = function() {                                             //控制器里面做的事就是给变量赋值,通过html中的ng-click来调用赋值的方法
            $scope.messageText = ‘This is an error!‘;
            $scope.isError = true;
            $scope.isWarning = false;
        };
        $scope.showWarning = function() {
            $scope.messageText = ‘Just a warning. Please carry on.‘;
            $scope.isWarning = true;
            $scope.isError = false;
        };
    }
])

时间: 2024-11-05 00:42:34

[email protected]浅谈class与Ng-Class的应用的相关文章

浅谈控件(组件)制作方法一(附带一delphi导出数据到Excel的组件实例)(原创)

来自:http://blog.csdn.net/zhdwjie/article/details/1490741 ------------------------------------------------------------------- 从99年学习delphi开始,我就被它的快速开发迷上了,那时候刚接触编程,对可视化开发特别来劲,原因嘛,不外乎是比C更快的实现啦,这几年来,从delphi的C/S到三层B/S,大大小小也写过一些软件,自认为这delphi也就这么些功能吧,自从最近偶得一

浅谈linux中shell变量$#,[email&#160;protected],$0,$1,$2,$?的含义解释

浅谈linux中shell变量$#,[email protected],$0,$1,$2,$?的含义解释 下面小编就为大家带来一篇浅谈linux中shell变量$#,[email protected],$0,$1,$2的含义解释.小编觉得挺不错的,现在就分享给大家,也给大家做个参考.一起跟随小编过来看看吧 摘抄自:ABS_GUIDE 下载地址:http://www.tldp.org/LDP/abs/abs-guide.pdf linux中shell变量$#,[email protected],$

再谈 $* 和 [email&#160;protected] 在 Bash 中的表现

除非特别说明,本文中出现的 Shell 均指 Bash 4.3.首先说一个基础知识:Shell 中的变量在展开成值(Parameter Expansion)之后,这个值在某些上下文(Context)中,还会进行分词操作(Word Splitting),但在另外一些上下文中,不会进行分词操作.本文中把会进行分词操作的上下文叫做列表上下文(List Context),把不会进行分词的上下文叫做标量上下文(Scalar Context).还有一个基础知识再提一嘴,就是 Shell 在分词时会跳过那些被

.net中对象序列化技术浅谈

.net中对象序列化技术浅谈 2009-03-11 阅读2756评论2 序列化是将对象状态转换为可保持或传输的格式的过程.与序列化相对的是反序列化,它将流转换为对象.这两个过程结合起来,可以轻松地存储和传输数 据.例如,可以序列化一个对象,然后使用 HTTP 通过 Internet 在客户端和服务器之间传输该对象.反之,反序列化根据流重新构造对象.此外还可以将对象序列化后保存到本地,再次运行的时候可以从本地文件 中“恢复”对象到序列化之前的状态.在.net中有提供了几种序列化的方式:二进制序列化

[nRF51822] 14、浅谈蓝牙低功耗(BLE)的几种常见的应用场景及架构(科普类干货)

蓝牙在短距离无线通信领域占据举足轻重的地位—— 从手机.平板.PC到车载设备, 到耳机.游戏手柄.音响.电视, 再到手环.电子秤.智能医疗器械(血糖仪.数字血压计.血气计.数字脉搏/心率监视器.数字体温计.耳温枪.皮肤水分计等), 再到智能家居等领域均占有一席之地. 而蓝牙低功耗(BLE)是在蓝牙4.0协议上修改以适用低功耗应用场景的一种蓝牙协议. 随着上一股智能消费类电子大潮的到来,BLE的各种应用也像雨后春笋般在市场上铺开. 如果想 紧跟蓝牙协议的最新动态 ,可以在https://www.b

浅谈测试rhel7新功能时的感受及遇到的问题

半夜起来看世界杯,没啥激情,但是又怕错误意大利和英格兰的比赛,就看了rhel7 相关新功能的介绍. 安装还算顺利,安装的界面比以前简洁的多,很清爽,分类很是明确. 有些奇怪的是,我安装的时候,怕有些基础的包没有装上去,所以选定了mini和Web的类型,结果还是有些基础的包没有安装,比如 ifconfig . 虚拟机的网卡,被识别为ens,有意思. yum groupinstall Base 这样的话,就可以把一些基础的包打上.可以正常的时候ifconfig lsof  . 这里需要说明的是,re

浅谈三层架构(2)

感受: 对于三层的学习,自己刚开始的感觉真的是一头雾水啊,当时真的出现了很烦躁的感觉,我想这种感觉的出现真的是很可怕的,就这样耽误了两天,在网上也搜寻者自己想要的资料,昨天四姐也好心给调试了一番,顿时把自己的大脑打通了,其实问题难不难,就在于能不能打开思路了! VB.NET的三层实现: 上篇文章主要是对于三层有了一个表面的理解,下面针对机房收费登陆界面来进行一下简单的理解: UI层主要就是表面的构建,多以需要使用windows窗体来完成,而其他BLL和DAL则不需要,之间建立一个类库则可以完成自

浅谈程序员该具备的自我修养

各行各业的工作者,都有其要求,那么作为程序员,我们又该具备哪些素养呢?博主在这里浅谈个人看法,如有不当之处,请大佬们指正. 一.知识储备 1.数学 或许在很多人看来,学计算机用不到什么数学,最多也就是一百以内的加减乘除,用在for循环.数组索引之类的上面.但其实不然,大部分人这样觉得是因为基本都工作在应用层,所以相对而言,用到的数学知识会比较少,也比较浅显. 而当从应用层更深地学习研究时,就需要一定的数学能力了. 2.计算机 1)操作系统 操作系统(OS)是配置在计算机硬件上的第一层软件.是对硬

浅谈Linux下Makefile编写

浅谈Linux下Makefile的编写 前言:本文简要介绍Makefile文件的编写规范,结合具体项目中的应用进行讲解. 具体代码地址: https://github.com/AnSwErYWJ/DogFood/blob/master/Makefile 简介 Make工具最主要也是最基本的功能就是通过makefile文件来描述源程序之间的相互关系并自动维护编译工作.而makefile 文件需要按照某种语法进行编写,文件中需要说明如何编译各个源文件并连接生成可执行文件,并要求定义源文件之间的依赖关