AngularJs ngClass、ngClassEven、ngClassOdd、ngStyle

news/2025/2/26 13:15:45

这几个都关于样式及类名修改的,所以先把样式代码贴上吧。

  .red{color:red}
  .blue{color:blue}

写案例用到的样式就这么简单的两个,下面进入正题。

ngClass

ngClass指令允许在HTML标签上通过绑定一个代表所有将被添加的类的表达式去动态的设定CSS类名。

该指令操作有三种不同的方式,根据三种类型的表达式计算结果为:

  1. 如果表达式计算的结果是个字符串,那么这个字符串就是一个或多个以空格分隔开的类名;
  2. 如果表达式计算的结果是个数组,而且这个数组的元素都是字符串,那么这个数组的每个元素就是一个或多个以空格分隔开的类名;
  3. 如果表达式的计算结果为一个对象,那么对象的每个键值对的相对应的有真实存在的值将会被当作类名。

格式:ng-calss=“value”   ng-calss=“{true:’class-one’,false:“classs-two”}[value]”

value:表达式。

使用代码:

  <input type="button" ng-click="isChecked = !isChecked" value="toggle" />
  <span ng-class="{red:isChecked}">Hello World !!!</span>
  <span ng-class="{true:'red'}[isChecked]">Hello World !!!</span>

 ngClass可以用于一些动态样式的变化,当满足某某某条件需要改变样式的时候(比如:验证不通过时显示红色边框),这种的在项目开发中用到的地方还是较多的。

ngClassEven/ngClassOdd

ngClassEven和ngClassOdd 指令和ngClass工作原理一样,除此之外,他们在ng-repeat里分别对偶(奇)数行有对应的影响。

格式: ng-calss-even=“value”    ng-class-odd=“value”

value:表达式。

使用代码:

  <ol ng-init="items = ['A','B','C','D']">
    <li ng-repeat="i in items"><span  ng-class-odd="'red'" ng-class-even="'blue'">{{i}}</span></li>
  </ol>

上面这串代码返回的结果就是奇数行的是红色字体,偶数行的是蓝色字体,我们在做表格数据的时候或者列表数据的时候用的较多,而且该指令使用也方便。

ngStyle

ngStyle指令允许在HTML元素上设置css样式。

格式:ng-style=“value”    class=”ng-style:value”

value:表达式。

使用代码:

  <div ng-app="Demo" ng-controller="testCtrl as ctrl">
      <p ng-style="ctrl.red">Hello World</p>
      <p class="ng-style:ctrl.blue">Hello World</p>
  </div>
  (function () {
    angular.module("Demo", [])
    .controller("testCtrl", testCtrl);
    function testCtrl() {
        this.red = { color: "red" };
        this.blue = { color: "blue" };
    };
  }());

动态设置css样式,这个指令需要和ngClass区分下,ngClass是动态设置css类名,ngStyle是动态设置css样式。


http://www.niftyadmin.cn/n/3578213.html

相关文章

iOS中的图像处理(一)——基础滤镜

最近在稍微做一些整理&#xff0c;翻起这部分的代码&#xff0c;发现是两个多月前的了。 这里讨论的是基于RGBA模型下的图像处理&#xff0c;即将变换作用在每个像素上。 代码是以UIImage的category形式存在的&#xff1a; [cpp] view plaincopytypedef struct _singleRGBA { …

Alpha冲刺 - (4/10)

Part.1 开篇 队名&#xff1a;彳艮彳亍团队 组长博客&#xff1a;戳我进入 作业博客&#xff1a;班级博客本次作业的链接 Part.2 成员汇报 组员1&#xff08;组长&#xff09;柯奇豪 过去两天完成了哪些任务文章基本的存储、列表生成显示 展示GitHub当日代码/文档签入记录 接下…

如何使元素在浏览器缩小的时候不会出现留白?

1&#xff1a;代码 <!DOCTYPE html> <html><head><meta charset"utf-8" /><title></title><!--<link rel"stylesheet" type"text/css" href"css/css1.css" />--><style type&quo…

mysql之lvm快照方式备份恢复

好像一般大家都不用这个吧&#xff0c;这里也仅是当做记录吧。其实lvm快照不管是什么存储引擎都可以做到接近热备&#xff0c;看起来也还不错的样子。不过却也需要一些所必须的条件。如&#xff1a;LVM卷&#xff0c;而且也有足够的空闲空间来做快照&#xff0c;并且事务日志也…

HTML与CSS中多列等高问题?

在排版时是否会遇到多列排列时由于内容长短不一而导致各列不对齐&#xff0c;怎么使多个div自适应内部文字高度且等高&#xff1f; 问题展示 解决办法 1&#xff1a;通过margin/padding实现等高对齐&#xff08;每列设置很大的padding&#xff0c;再设置一个很大的负的margin…

Linux下监控磁盘使用量并在超过阀值后自动发送报警邮件

最近Linux服务器磁盘使用量经常到100%&#xff0c;直到影响到正常服务出现故障才会去注意&#xff0c;做不到防患于未然&#xff0c;今天在网上搜集了资料&#xff0c;加上自己修改&#xff0c;写了一个shell脚本用于实时监控磁盘使用量并在超过阀值后自动发送报警邮件。 脚本简…

LinkedHashMap 保持有序迭代原理

2019独角兽企业重金招聘Python工程师标准>>> 之前一直有这个疑问&#xff0c;今天有时间就把源码看了看终于知道了原理。分享给大家也做笔记自己可以随后查看。 linkedHashMap entry 继承了hashMap.Entry 然后定义了一个before与after用来存储当前key的上一个值引用…

如何生成可变表头的excel(转)

1、实现功能&#xff1a; 传入一个表头和数据&#xff0c;将数据导入到excel中。 为了便于项目的扩展&#xff0c;数据传入通过泛型集合传入&#xff0c;获取数据时&#xff0c;通过反射的方式获取&#xff0c;这样无论你的表头是多少项&#xff0c;我都能很方便的生成。另外为…