Angular动态绑定样式及改变UI框架样式的方法小结


Posted in Javascript onSeptember 03, 2018

AngularJS 简介

AngularJS 是一个 JavaScript 框架。它可通过 <script> 标签添加到 HTML 页面。

AngularJS 通过 指令 扩展了 HTML,且通过 表达式 绑定数据到 HTML。

AngularJS 是一个 JavaScript 框架

AngularJS 是一个 JavaScript 框架。它是一个以 JavaScript 编写的库。

AngularJS 是以一个 JavaScript 文件形式发布的,可通过 script 标签添加到网页中:

<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>

一:angular动态绑定样式

举个栗子:

<tr *ngFor="let dataTr of tableData;let i = index" [formGroupName]="i" [ngClass]='isHideClass(i)'>

 isHideClass(index){
  const data = this.tableData[index];
  // if(data['532411351520251904'].value.valueText===''&&data['532411588670394368'].value.valueText===''
  // &&data['532411670509654016'].value.valueText==='') {
  //  return 'hide_tr'
  // }
  let arr = [];
  for (let i in data) {
   arr.push(data[i]);
  }
  if(arr.every((val,idx)=>{
    return val.value.valueText === ''
  })){
   return 'hide_tr'
  }
 }

hide_tr是类名,

.hide_tr{
display: none !important;
}

解释:ngClass要绑定的类名会在tr根据数据循环生成html的过程中调用组件中定义的isHideClass()方法,并把i(index)带过去让方法使用
根据方法逻辑返回的类名去绑定写好的样式isHideClass(index){return 'hide'},这时候这个ngClass就绑定上了hide这个类名的样式

二:angular改UI框架样式(例子是蚂蚁金服的UI框架)

例子:

::ng-deep{
  .ant-card-head-title{
   font-weight: bold;
  }
  .ant-table-placeholder{
   display: none;
  }
  .ant-card-body {
   padding-bottom: 0px
  }
  .hide_tr{
   display: none !important;
  }
 }

在要改的样式前面加上::ng-deep,就可以改变框架定义好的样式

总结

以上所述是小编给大家介绍的Angular动态绑定样式及改变UI框架样式的方法小结,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
用Javascript实现UTF8编码转换成gb2312编码
Dec 22 Javascript
javaScript同意等待代码实现心得
Jan 01 Javascript
解析JavaScript中的不可见数据类型
Dec 02 Javascript
node.js适合游戏后台开发吗?
Sep 03 Javascript
加载列表时jquery获取ul中第一个li的属性
Nov 02 Javascript
在其他地方你学不到的jQuery小贴士和技巧(欢迎收藏)
Jan 20 Javascript
ie下js不执行的几种可能
Feb 28 Javascript
JavaScript实现求最大公共子串的方法
Feb 03 Javascript
JS实现数组去重,显示重复元素及个数的方法示例
Jan 21 Javascript
vue强制刷新组件的方法示例
Feb 28 Javascript
微信小程序返回上一级页面的实现代码
Jun 19 Javascript
详解JavaScript的this指向和绑定
Sep 08 Javascript
node.js使用免费的阿里云ip查询获取ip所在地【推荐】
Sep 03 #Javascript
react在安卓中输入框被手机键盘遮挡问题的解决方法
Sep 03 #Javascript
Vue 中对图片地址进行拼接的方法
Sep 03 #Javascript
VUE预渲染及遇到的坑
Sep 03 #Javascript
详解vue通过NGINX部署在子目录或者二级目录实践
Sep 03 #Javascript
vue的style绑定background-image的方式和其他变量数据的区别详解
Sep 03 #Javascript
vue完成项目后,打包成静态文件的方法
Sep 03 #Javascript
You might like
php htmlspecialchars()与shtmlspecialchars()函数的深入分析
2013/06/05 PHP
event.srcElement+表格应用
2006/08/29 Javascript
XRegExp 0.2: Now With Named Capture
2007/11/30 Javascript
慎用 somefunction.prototype 分析
2009/06/02 Javascript
基于Jquery的动态添加控件并取值的实现代码
2010/09/24 Javascript
基于jquery库的tab新形式使用
2012/11/16 Javascript
javascript的数组和常用函数详解
2014/05/09 Javascript
JavaScript获得页面base标签中url的方法
2015/04/03 Javascript
Javascript 基础---Ajax入门必看
2016/07/06 Javascript
功能强大的Bootstrap使用手册(一)
2016/08/02 Javascript
详解AngularJS通过ocLazyLoad实现动态(懒)加载模块和依赖
2017/03/01 Javascript
jquery+ajaxform+springboot控件实现数据更新功能
2018/01/22 jQuery
Vue中props的使用详解
2018/06/15 Javascript
实现Vue的markdown文档可以在线运行的方法示例
2018/12/11 Javascript
通过实例解析js简易模块加载器
2019/06/17 Javascript
vue 解决IOS10低版本白屏的问题
2020/11/17 Javascript
Python下的subprocess模块的入门指引
2015/04/16 Python
Python入门教程之if语句的用法
2015/05/14 Python
Python读取和处理文件后缀为.sqlite的数据文件(实例讲解)
2017/06/27 Python
windows下python 3.6.4安装配置图文教程
2018/08/21 Python
Python运行不显示DOS窗口的解决方法
2018/10/22 Python
python交互界面的退出方法
2019/02/16 Python
Python 实现Numpy中找出array中最大值所对应的行和列
2019/11/26 Python
Python 获取numpy.array索引值的实例
2019/12/06 Python
python logging.basicConfig不生效的原因及解决
2020/02/20 Python
canvas环形倒计时组件的示例代码
2018/06/14 HTML / CSS
美国最大的宠物用品零售商:PetSmart
2016/11/14 全球购物
澳大利亚自然和有机的健康美容产品一站式商店:Ziani Beauty
2017/12/28 全球购物
微软中国官方商城:Microsoft Store中国
2018/10/12 全球购物
类、抽象类、接口的差异
2016/06/13 面试题
竞争上岗实施方案
2014/03/21 职场文书
安全生产专项整治方案
2014/05/06 职场文书
优秀大学生自荐信
2014/06/09 职场文书
教师四风问题对照检查材料
2014/09/26 职场文书
党的群众路线教育实践活动个人对照检查材料(医生)
2014/11/05 职场文书
2016大学迎新晚会开场白
2015/11/24 职场文书