ionic之使用ng-class控制样式

最新推荐文章于 2020-10-19 10:59:26 发布
原创 最新推荐文章于 2020-10-19 10:59:26 发布 · 5.3k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#html #ng-class #ionic

本文介绍了一种使用HTML和CSS实现根据变量值动态改变文本样式的方案。通过简单的代码示例展示了如何根据表达式 info.scheduleState=='done' 的真假来决定是否为文本添加删除线样式。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

我是代码

html

 <p ng-class="{true: 'done', false: ''}[info.scheduleState == 'done']">{{ info.scheduleDes }}</p>

css

.done {
  text-decoration: line-through
}

这个就可以根据info.scheduleState == 'done' 表达式的值控制标签样式。。

效果如下

这里写图片描述

ionic4任意拖拽ng2-dragula
qq_31392495的博客
02-08 512
ionic自带的组件 on-reorder-group只能上下拖拽排序，如果想要元素任意拖拽可使用ng2-dragula； 详情参考： stackoverflow–questions dragula示例以及github地址
Android:Ionic框架使用实例
最新发布
偶是不器的博客
02-11 3200
Android:Ionic框架实例
Ionic 的 ng-class 在聊天功能上面的巧妙运用
dkz10838的博客
09-27 199
很多人在问我是ionic好呢？还是react好呢？ 其实我只想告诉你去看文档啊，不用用怎么知道哪个合适呢？ 嘿嘿但是真的这么问的时候我也不会这么回答的，那岂不是太张狂了哈哈哈 react我确实没有用过，所以今天不多做什么评价。但是ionic我在项目中一直用着，想说的是确实很好用。 上一篇文章我们介绍了css3实现聊天界面的布局。那么今天我们就来学习一下，如何在页面进行数据交互。 ...
ng-class ionic
weixin_30878361的博客
10-16 90
我发现 ng-class="{yourclass:true,outerclass:false}" 竟然不起作用...囧.... 幸好有Google .... 1 <p ng-class="{{ class }}">First</p> 2 <p ng-class="getClass()">Second</p> 3 <...
ionic2/3 ngClass 和ngStyle用法
东黧的博客
07-12 3857
ngClass第一个参数为类名称，第二个参数为boolean值，如果为true就添加第一个参数的类[ngClass]="{'text-success':index == 0}"ngStyle没有判断<div [ngStyle]="{'background-color':'green'}"></<div>ngStyle有判断<div [ngStyle]="{'background-color':use
ionic css过渡配合ng-class做表单的label点击上移
jacoby_fire的博客
05-17 766
1、需求描述： 在表单中，点击input，input中的placeholder上移成为label标签 2、代码： css ://表单中的label随着获取焦点上移 .label-slide-up{ font-size: 0.32rem; color:#97a6ac; transition: all linear 0.5s; position: abso
Angular+Ionic 中：ngIf，ngSwitch， ngStyle，ngClass，ngModel的使用总结：
weixin_44794123的博客
09-18 738
一，ngIf 1.可实现两种状态的切换 <ion-content class="bill-message" *ngIf="!setBill"> <ion-content> 2.效果 二，ngSwitch 1，可据数据分情况展示： html中： <a>发票类型:</a> <ion-text [ngSwitch]="item.invoiceType"> <span *ngSwitchCase="1"&g
Angular.js中ng-include用法及多标签页面的实现方式详解
10-19
这里的`ng-init`用于初始化`test`变量，`ng-class`根据`test`的值来决定哪个按钮应该高亮，而`ng-click`则用于在点击按钮时切换`test`的值。`ng-show`根据`test`的值决定显示哪个`ng-include`的内容。 `ng-include`...
ionic由于使用了header和subheader导致被遮挡的问题的两种解决方法
09-01
<button class="button" ng-click="doSomething()">Left Button <h1 class="title">Header <div class="buttons"> <button class="button">Right Button </ion-header-bar> <ion-header-bar align-title=...
简单实现IONIC购物车功能
08-31
在本文中，我们将深入探讨如何使用IONIC框架来创建一个简单的购物车功能。IONIC是一个流行的开源框架，用于构建高性能的混合移动应用。通过结合HTML、CSS和JavaScript，我们可以利用IONIC的强大功能来构建用户友好的...
ionic4页面常用判断
沉睡的博客
09-20 193
1、class 类 [ngClass] [ngClass]="item.uid == '' ?'':'self'" 2、if判断 ngIf ngIf="item.uid == ''" 3、for循环 ngFor ngFor="let item of list;let i = index;" ngFor="let item of shares.slice(0,3);let j = ind...
Angular4中[ngClass]、[ngStyle]的基本使用
chelen_jak的专栏
08-31 1486
原文出处：https://blog.youkuaiyun.com/u013589443/article/details/72866603 1、ngStyle 基本用法 &lt;div [ngStyle]="{'background-color':'green'}"&gt;&lt;/&lt;div&gt; 判断添加 &lt;div [ngStyle]="{'background-color':us...
angular2 [ngStyle] [ngClass]的用法
热门推荐
pht1991的博客
05-18 1万+
1、ngStyle 基本用法 div [ngStyle]="{'background-color':'green'}">div> 判断添加 2、ngClass第一个参数为类名称，第二个参数为boolean值，如果为true就添加第一个参数的类 基本用法 [ngClass]="{'text-success':true}" 判断 [ngClass]="{'text-success':u
angular6 ngClass 和 ngStyle学习笔记
黄彪博客
10-01 2199
文章目录知识点ngClassngStyle案例 文章参考 Angular2 ngclass与ngstyle的使用 知识点 ngClass [ngClass]="‘css类1 css类2’" 字符串以空格分割形式。 [ngClass]="[‘css类1’,‘css类2’]" 数组形式。 [ngClass]="{‘css类1’:true, ‘css类2’:true}" key/value形式 ...
angularJs中关于ng-class的三种使用方式说明
weixin_34355559的博客
11-04 317
2019独角兽企业重金招聘Python工程师标准>>> ...
AngularJS中关于ng-class指令的几种实现方式详解
寂寞的天空的博客
02-16 3727
前言 开发中经常会遇到这样的需求，一个元素需要在不同的状态下呈现不同的样子，而在这所谓的的样子当然就是改变其css的属性，而实现动态的改变属性值，我们就需要实现动态的更换其class属性值。 在这给大家介绍三种方法来实现，大家可以根据自己的需求来选择方式，下面来看看。 第一种：通过数据的双向绑定（不推荐） ? 1 2 3
细说Angular ng-class
weixin_33796177的博客
05-22 198
       在前面Angularjs开发一些经验总结中我们说到在angular开发中angular controller never 包含DOM元素（html/css），在controller需要一个简单的POJO（plain object javascript object），与view完全的隔离（交互angularjs框架的职责。但在某些项目中看见controller涉及DOM的元素最多的是...
理解Ionic 2之class及其修饰器@App、@Pipe
无声告白
03-05 3095
理解class只要接触过一门面向对象语言，如Java、C#等，就不会对class感到陌生，其有个响亮的名号：类。它是编程的宠儿，聚万千宠爱于一身，于是其能够开枝散叶，结婚生子，即为继承。但是对于JavaScript开发者来说，class还只是刚刚被实现的东东，当年为了构建一个形似class的东东需要这样做：function Animal (power, speed) { this.power
ionic修改控件内置class样式
qwe1314225的博客
10-19 796
背景 使用ionic中控件，有时候他的样式不能满足实际开发需求，需要改改一些样式。 ion-datetime 时间控件，想修改一下默认的白色背景 修改后： 代码： 在variables.scss文件中的root伪类中增加属性 :root { //修改时间控件的背景颜色 ion-picker .picker-wrapper{ background-color: #3880ff; } } 总结 F12分析元素，找到对应的控件，类，然后把属性写到 variables
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值