ng-class用法

在angular中为我们提供了3种方案处理class:

1:scope变量绑定。这种方案不推荐,因为scope里最好处理业务逻辑,不去管渲染的事。
2:字符串数组形式。
3:对象key/value处理。

我们继续其他两种解决方案:
1字符串数组形式是针对class简单变化,具有排斥性的变化,true是什么class,false是什么class,其形如;

function testCtrl($scope) {
    $scope.isError = true;
}

<div ng-class="{true: ‘error‘, false: ‘info‘}[isError]">
</div>

其结果是2中组合,isError表达式为true,则 error,否则事info。

2对象key/value处理主要针对复杂的class混合,其形如:

function testCtrl($scope) { 

}

<div ng-class={‘selected‘: isSelected, ‘car‘: isCar}">
</div> 

当 isSelected = true 则增加selected class,
当isCar=true,则增加car class,
所以你结果可能是4种组合。

比较推荐用2,3两种方式,不建议将class放入controller scope之上,scope需要保持纯洁行,scope上的只能是数据和行为。

时间: 2024-10-09 01:22:29

ng-class用法的相关文章

angular学习(三):ng渲染案例用法总结

前两篇把基本的架子都搭好了,在单独的Controller中处理独立的业务,这时候渲染相应的页面就要用到ng提供的相应组件和事件,下面我采用一一列举的方式,将这些知识都总结于此: ng-click: 案例 <button type="button"class="btn btn-primary" ng-click="showUploadView()">点击上传</button> 说明 声明了一个btn的click事件,对应的c

一些快捷键&amp;工具的用法收集

个人收集的一些自己以前不会的用法.收集起来以后还得在两个系统(好快又要加多一个centos了)桌面各备一份才好,没事就逼自己去熟悉这些操作= = Sublime2  // 来自Mitchell Chu's Blog ctrl + shift + n                     打开新Sublime ctrl + w                                 关闭当前Sublime文件 ctrl + shift + s                     另存

ng 自定义过滤器的创建和使用

过滤器的本质就是一个方法,参数就是输入的值以及给过滤器指定的参数,返回值就是处理后要显示的值. ①过滤器创建var app = angular.module();app.filter('名称',func)//创建过滤器在filter的第二参数,是一个方法,返回的是过滤器方法(有返回值)app.filter('customFilter', function () { return function (value,arg1) { console.log(value,arg1); return '$'

嘿!@野兽,你的ng api 掉了 - - angular.identity和angular.noop

@野兽的 ng api 学习 -- angular.identity和angular.noop angular.identity 函数返回本身的第一个参数.这个函数一般用于函数风格. 格式:angular.identity() 使用代码: <script> angular.module("Demo", []) .controller("testCtrl", ["$scope", function ($scope) { var getR

Andrew Ng Machine Learning 专题【Linear Regression】

此文是斯坦福大学,机器学习界 superstar - Andrew Ng 所开设的 Coursera 课程:Machine Learning 的课程笔记. 力求简洁,仅代表本人观点,不足之处希望大家探讨. 课程网址:https://www.coursera.org/learn/machine-learning/home/welcome Week 3: Logistic Regression & Regularization 笔记:http://blog.csdn.net/ironyoung/ar

走进AngularJs(二) ng模板中常用指令的使用方式

通过使用模板,我们可以把model和controller中的数据组装起来呈现给浏览器,还可以通过数据绑定,实时更新视图,让我们的页面变成动态的.ng的模板真是让我爱不释手.学习ng道路还很漫长,从模板开始入手是个不错方式,因为这部分内容相对简单好理解,而且是视图层的东西,大家都喜欢可以立马看得见的东西嘛.本篇我将搜罗模板中的常用指令一一测试,了解其使用方法,有点像背单词的感觉,会比较枯燥.不过对于初学,这样的枯燥是必须要经历的,开始~ 一.模板中可使用的东西及表达式 模板中可以使用的东西包括以下

vim常用用法

vim和vi用法基本上一样,vim更强大一些,还有颜色标示.vim的使用,vim有三种模式分别是一般模式,编辑模式,命令模式. 一般模式:删除.复制和粘贴 x:向后删除 X:向前删除 nx:向后删除n个字符 dd:删除当行 D:删除当行字符 ndd:删除当前行向下的n行 yy:复制光标所在的行 p:将复制的数据粘贴在光标的下一行 P:将复制的数据粘贴在光标的上一行 编辑模式: i:在光标所在的位置插入字符 I:在光标所在的行第一个非空位置插入输入的字符 a:当前光标下一个位置输入字符 A:光标所

angularjs中常用的ng指令介绍【转载】

原文:http://www.cnblogs.com/lvdabao/p/3379659.html 一.模板中可使用的东西及表达式 模板中可以使用的东西包括以下四种: 指令(directive).ng提供的或者自定义的标签和属性,用来增强HTML表现力. 标记(markup).即双大括号{{}},可将数据单向绑定到HTML中. 过滤器(filter).用来格式化输出数据. 表单控制.用来增强表单的验证功能. 其中,指令无疑是使用量最大的,ng内置了很多指令用来控制模板,如ng-repeat,ng-

vim的常用用法总结

vim和vi用法基本上一样,vim更强大一些,还有颜色标示.vim的使用,vim有三种模式分别是一般模式,编辑模式,命令模式. 一般模式:删除.复制和粘贴 x:向后删除        X:向前删除       nx:向后删除n个字符       dd:删除当行       D:删除当行字符       ndd:删除当前行向下的n行       yy:复制光标所在的行       p:将复制的数据粘贴在光标的下一行       P:将复制的数据粘贴在光标的上一行 编辑模式: i:在光标所在的位置插

AngularJS简单用法

一.数据绑定 AngularJS的双向数据绑定,意味着你可以在Mode(JS)中改变数据,而这些变动立刻就会自动出现在View上,反之亦然.即:一方面可以做到model变化驱动了DOM中元素变化,另一方面也可以做到DOM元素的变化也会影响到Model. 在我们使用jQuery的时候,代码中会大量充斥类似这样的语句:var val = $(‘#id’).val(); $(‘#id’).html(str);等等,即频繁的DOM操作(读取和写入),其实我们的最终目的并不是要操作DOM,而是要实现业务逻