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 自定义事件初探
Aug 21 Javascript
使用javascript获取flash加载的百分比的实现代码
May 25 Javascript
让AJAX不依赖后端接口实现方案
Dec 03 Javascript
jQuery $.data()方法使用注意细节
Dec 31 Javascript
HTML页面滚动时获取离页面顶部的距离2种实现方法
Sep 05 Javascript
yepnope.js使用详解及示例分享
Jun 23 Javascript
通过JS和PHP两种方法判断用户请求时使用的浏览器类型
Sep 01 Javascript
JavaScript之WebSocket技术详解
Nov 18 Javascript
Bootstrap3下拉菜单的实现
Feb 22 Javascript
vue操作下拉选择器获取选择的数据的id方法
Aug 24 Javascript
vue+canvas实现炫酷时钟效果的倒计时插件(已发布到npm的vue2插件,开箱即用)
Nov 05 Javascript
jquery插件实现悬浮的菜单
Apr 24 jQuery
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
资料注册后发信小技巧
2006/10/09 PHP
PHP自定义函数收代码
2010/08/01 PHP
php删除数组元素示例分享
2014/02/17 PHP
php while循环控制的简单实例
2016/05/30 PHP
php cookie工作原理与实例详解
2016/07/18 PHP
thinkPHP框架自动填充原理与用法分析
2018/04/03 PHP
指定位置如果有图片显示图片,无图片显示广告的JS
2010/06/05 Javascript
JavaScript 内置对象属性及方法集合
2010/07/04 Javascript
javascript数组去掉重复
2011/05/12 Javascript
JQuery入门——用映射方式绑定不同事件应用示例
2013/02/05 Javascript
jquery创建一个ajax关键词数据搜索实现思路
2013/02/26 Javascript
JS 加入收藏夹的代码(主流浏览器通用)
2013/05/13 Javascript
如何使用Vuex+Vue.js构建单页应用
2016/10/27 Javascript
Javascript 两种刷新方法以及区别和适用范围
2017/01/17 Javascript
vue动态组件实现选项卡切换效果
2017/03/08 Javascript
详解从angular-cli:1.0.0-beta.28.3升级到@angular/cli:1.0.0
2017/05/22 Javascript
React-Native 组件之 Modal的使用详解
2017/08/08 Javascript
AngularJS实现表单验证功能详解
2017/10/12 Javascript
vue语法之拼接字符串的示例代码
2017/10/25 Javascript
react koa rematch 如何打造一套服务端渲染架子
2019/06/26 Javascript
jQuery弹框插件使用方法详解
2020/05/26 jQuery
微信小程序实现页面监听自定义组件的触发事件
2020/11/01 Javascript
[05:03]2018DOTA2亚洲邀请赛主赛事首日回顾
2018/04/04 DOTA
phpsir 开发 一个检测百度关键字网站排名的python 程序
2009/09/17 Python
python 字符串格式化代码
2013/03/17 Python
python先序遍历二叉树问题
2017/11/10 Python
利用Python代码实现数据可视化的5种方法详解
2018/03/25 Python
python 读写excel文件操作示例【附源码下载】
2019/06/19 Python
Python面向对象之多态原理与用法案例分析
2019/12/30 Python
python如何编写win程序
2020/06/08 Python
Python+Kepler.gl实现时间轮播地图过程解析
2020/07/20 Python
英国历史最悠久的DJ设备供应商:DJ Finance、DJ Warehouse、The DJ Shop
2019/09/04 全球购物
学校综治宣传月活动总结
2014/07/02 职场文书
公路施工安全责任书
2015/05/08 职场文书
2015军训通讯稿大全
2015/07/18 职场文书
详细介绍python类及类的用法
2021/05/31 Python