AngularJs通过ng-class动态改变样式类实例操作

最新推荐文章于 2023-04-28 14:19:43 发布
最新推荐文章于 2023-04-28 14:19:43 发布
阅读量2.5k 收藏
点赞数
分类专栏： angularJS 文章标签： angularJs

AngularJs通过ng-class动态改变样式类实例操作，代码如下：

查看源码
打印代码 帮助
01<!doctype html>
02<html lang="en">
03<head>
04    <meta charset="UTF-8" />
05    <title>Document</title>
06    <style type="text/css">
07        .ng-cloak{display:none;}
08        td{height:30px;line-height:30px;padding:0px 10px;}
09        .red{background:red;}
10        .blue{background:blue;}
11    </style>
12</head>
13<body ng-app="app" ng-controller="ctrl" ng-cloak class="ng-cloak">
14    <table cellpadding="0" cellspacing="0" border="1">
15        <thead>
16            <tr>
17                <td>用户ID</td>
18                <td>姓名</td>
19                <td>年龄</td>
20                <td>性别</td>
21            </tr>
22        </thead>
23        <tbody>
24            <tr ng-repeat="v in data" ng-class="{'red':v.usex=='男'}" ng-class-even="{'blue':true}">
25                <td>{{v.uid}}</td>
26                <td>{{v.uname}}</td>
27                <td>{{v.uage}}</td>
28                <td>{{v.usex}}</td>
29            </tr>
30        </tbody>
31    </table>
32</body>
33</html>
34<script type="text/javascript" src="http://www.zymseo.com/js/angular.min.js"></script>
35<script type="text/javascript">
36    var m = angular.module('app', []);
37    m.controller('ctrl', ['$scope', function($scope){
38        $scope.data = [
39            {'uid':1, 'uname':'张三', 'uage': 23, 'usex':'男'},
40            {'uid':2, 'uname':'李四', 'uage': 24, 'usex':'男'},
41            {'uid':3, 'uname':'王五', 'uage': 25, 'usex':'女'},
42            {'uid':4, 'uname':'赵六', 'uage': 22, 'usex':'女'}
43        ];
44    }]);
45</script>

ng-class="{'类名称':true/false}"，如果是true，则应用这个类，如果是false，则不引用这个类！

（完）！


K'illCode
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
angular10 动态绑定class来禁用a标签
朝花夕拾的博客
12-16 791
由于[disabled] 在a标签上是失效的 所以考虑用class绑定到a标签上来禁用 添加styles样式： a.disabled { pointer-events: none; filter: alpha(opacity=50); /*IE滤镜，透明度50%*/ -moz-opacity: 0.5; /*Firefox私有，透明度50%*/ opacity: 0.5; /*其他，透明度50%*/ } html中动态绑定class: [ngClass]=“.
angularJs中的ng-class动态改变样式
热门推荐
泠泠似水
05-28 1万+
exam1.html<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="angular.min.js"></script> </head> <body> <style> .lock { background : #dcdcdc; } .red {
AngularJs ngClass、ngClassEven、ngClassOdd、ngStyle
weixin_34356555的博客
11-06 139
这几个都关于样式及类名修改的，所以先把样式代码贴上吧。 .red{color:red} .blue{color:blue} 写案例用到的样式就这么简单的两个，下面进入正题。 ngClass ngClass指令允许在HTML标签上通过绑定一个代表所有将被添加的类的表达式去动态的设定CSS类名。 该指令操作有三种不同的方式，根据三种类型的表达式计算结果为： 如果表达式...
Angular-动态绑定class/style
zhumizhumi的博客
05-10 6603
一、CLASS/ngClass，效果都是一样的 (1)三目运算 <span [class]="index === 0? 'specBlue' : 'specRed'"></span> (2)对象 <span [class]='objClass'></span> objClass={ 'classBlue': true, 'classRed': false } (3)数组 <span [class]="['classBlue','classRed'
AngularJS ng-class样式切换
KingCruel的专栏
03-21 5344
1、HTML First Second Third All First Second Third .bgs
AngularJS使用ng-class动态增减class样式的方法示例
12-02
在上述实例中，我们看到`ng-class`被用来根据某些条件来改变元素的样式。让我们详细了解一下`ng-class`的用法。 首先，`ng-class`可以接受三种类型的值： 1. **对象映射方式**： 在示例中，`<p ng-class="{strike...
AngularJS入门教程之ng-class 指令用法
10-21
其中之一便是`ng-class`指令，这个指令允许我们动态地根据数据模型（model）的状态来改变元素的CSS类。在本文中，我们将深入探讨`ng-class`指令的用法、定义、语法以及实例，帮助初学者更好地理解和应用这个功能。 ...
Angular ng-class详解及实例代码
09-01
总的来说，`ng-class`是AngularJS中实现动态CSS类管理的强大工具，它可以灵活地根据应用程序的状态来改变元素的样式。在实际项目中，根据需求选择合适的方式来使用`ng-class`，可以有效地提高代码的可维护性和可读性...
angularjs2 ng2 密码隐藏显示的实例代码
10-19
总的来说，这个实例展示了Angular 2中的数据绑定、事件处理和CSS类的动态应用。这种功能在许多现代应用中都很常见，通过这种方式，开发者可以创建更加用户友好的界面，提高应用的可访问性和可用性。记住，良好的用户...
AngularJs点击状态值改变背景色的实例
10-18
例如，`.true`和`.false`类分别设置为绿色黄色和黄色背景，通过在JavaScript或AngularJS中动态添加或移除这些类，可以改变元素的背景色。例如，`ng-class`指令可以用来根据表达式的结果动态添加或移除类。 7. **ng-...
Angular动态绑定样式及改变UI框架样式的方法小结
10-18
AngularJS 是一个 JavaScript 框架。它是一个以 JavaScript 编写的库。这篇文章主要介绍了Angular动态绑定样式及改变UI框架样式的方法小结,需要的朋友可以参考下
详解AngularJS ng-class样式切换
12-29
整理文档，搜刮出一个详解AngularJS ng-class样式切换，稍微整理精简一下做下分享。 1、HTML <ion> <ion> <div class=button-bar> <div ng-class={true: ng-click=isFirst>First</div> <div ng-class={true: 'bgstyle-check', false: 'bgstyle'}[isSecond]
AngularJS ng-class（动态）
wosuizi0971的博客
08-11 197
<span class="label" ng-class="{'0':'label-info','1':'label-warning','2':'label-success'}[R.ApproveStatus]">{{R.ApproveStatus|ApprovalType}}</span>
angular9 动态添加class
weixin_43675173的博客
08-08 633
<ul> <li*ngFor="letitemoflist;leti=index"(click)="activeIndex(i)"[ngClass]="{'newCla':activeCla===i}"> <div>{{i}}---{{item.name}}---{{activeCla}}</div> </li> </ul> list=[ { ...
angular元素属性绑定_angular4 动态绑定class
weixin_36450447的博客
01-17 1129
问题场景：222.png请问一下 我想在1的位置添加一个和下标关联的class 应该怎么操作？有效的方案333.png444.png特别说明:带中括号后面就不要带大括号 反之就要带虚拟dom节点上不能帮属性 只能绑逻辑ng-container标签下层加一个div 把class放那里面{}里面的东西会去运算的另外死的东西用da括号括起来DEMO展示{{v1.category_name}}{{v1...
angular动态样式
weixin_45010894的博客
06-02 2601
angular动态样式
angular 中 [style] 及 [class] 动态绑定
weixin_44216637的博客
04-28 1171
angular 中 [style] 及 [class] 动态绑定
Angular学习笔记(二)（[ngClass]、[ngStyle]）
白不懂黑的静的专栏
06-22 211
在angular中可以通过 [ngClass]、[ngStyle]动态的设定模板元素的样式 ts文件： import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-home', templateUrl: './home.component.html', styleUrls: ['./home.component.css'] }) export class HomeComponent impl
angularJS中ng-class指令的三种实现方式
Jack 架构师之路
04-12 3498
引言       在我们开发中经常会遇到这样的需求，一个元素需要在不同的状态下呈现不同的样子，而在这所谓的的样子当然 就是改变其css的属性，而实现动态的改变属性值，我们就需要实现动态的更换其class属性值。在这给大家介绍三种 方法来实现。       第一种：通过数据的双向绑定（不推荐） var app=angular
angularjs 1.6.9 ng-class
最新发布
05-26
`ng-class` 是 AngularJS 中一个非常有用的指令，它允许我们根据条件动态地切换 HTML 元素的类。在 AngularJS 1.6.9 中，`ng-class` 的用法如下： ```html <div ng-class="{ 'class1': expression1, 'class2': ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值