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

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框架样式的方法小结，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • webapp框架AngularUI的demo改造之路

    webapp框架AngularUI的demo改造之路

    目的:把AngularUI的模板应用到现有项目上 步骤如下: 按功能表修改demo界面 学习angularUI如何加载全部页面,为了设置自定义加载模板,在demo/demo.js中找到这一段 复制代码 代码如下: //当#为/,/scroll等等,请求index.html中<base href=""> + home.html的页面 app.config(function($routeProvider) {   $routeProvider.when('/',        

  • 浅析webapp框架AngularUI的demo

    浅析webapp框架AngularUI的demo

    angularUI下载地址:https://github.com/Clouda-team/BlendUI 下载解压后,demo在根目录 现在测试官网demo的使用 用浏览器打开mobile-angular-ui-master/demo/index.html,发现没加载样式或者js.然后,审查元素后,发现加载的路径不对,于是进行了以下修改 第5行:<base href="/mobile-angular-ui-master/" /> 去掉所有/网站根目录路径,改为相对路径 de

  • 解析Angular 2+ 样式绑定方式

    引言 开发ngx(angular 2+ 以后都直接称为ngx)也有1年半的时间了,刚开始开发的时候使用的还是angular2 RC版,现在已经出angular5了,时光飞逝啊! ngx从设计之初就是一个component-based的框架,所以大到一个页面,小到一个按钮,都是一个component. 这就涉及到了组件的重用,设计通用组件的时候,必不可少的就是动态的样式绑定. 回头想想, angular还真是给我们提供了好几种属性绑定的方式呢. 接下来我们就来具体看看如果在组件中使用样式绑定. s

  • Angular学习笔记之集成三方UI框架、控件的示例

    本文介绍了Angular学习笔记之集成三方UI框架.控件的示例,分享给大家,具体如下: 安装 Material UI 方法: Material 官网:https://material.angular.io step 1: npm install --save @angular/material @angular/cdk step 2: npm install --save @angular/animations step 3: angular.cli ../node_modules/@angul

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

    AngularJS 简介 AngularJS 是一个 JavaScript 框架.它可通过 <script> 标签添加到 HTML 页面. AngularJS 通过 指令 扩展了 HTML,且通过 表达式 绑定数据到 HTML. AngularJS 是一个 JavaScript 框架 AngularJS 是一个 JavaScript 框架.它是一个以 JavaScript 编写的库. AngularJS 是以一个 JavaScript 文件形式发布的,可通过 script 标签添加到网页中:

  • Vue2.0 UI框架ElementUI使用方法详解

    Vue2.0 UI框架ElementUI使用方法详解

    今天来介绍一下ElementUI的使用,在Vue2.0更新之后,很多UI框架也应运而生,这个框架是饿了么团队开发的一款适用于PC的一个UI框架,体验之后给我的个人感觉确实是有助于快速开发的一款UI框架,在饿了么GitHub中我下载了一个团队开发的官方Demo(GitHub链接为:https://github.com/taylorchen709/vue-admin)感觉可以应对初期团队项目为管理系统的开发这一类的网站,下面我就来仔细讲解下如何让官方的Demo运行起来 首先我们使用windows件+

  • HTML里select的CSS样式的改变

    本以为可以很简单的在CSS里像input那样的给解决,结果没想到试了一下才知道常规的CSS根本没法改变的select样式,CSS里怎么弄,select都仍然是默认的那三维的样式.于是在网上搜索了一下,才知道,原来这个select是不能用常规的方法来定义CSS样式的.要用特殊的方法来处理.相信有很多朋友在处理网页的时候都会遇到这个问题,于是找了一篇不错的文章转过来,希望对大家有帮助---- 首先要告诉大家,如果你是用css的方法,除了箭头部分,其他都可以改变,这是很令人别扭的事,因为其他的样式改了

  • 微信小程序 动态绑定事件并实现事件修改样式

    微信小程序 动态绑定事件并实现事件修改样式 实例代码 wxml <scroll-view class="reportTypeScroll" scroll-x="true" scroll-left="{{toLeftNum}}"> <block wx:for-items="{{reportTypeList}}" wx:key="{{index}}"> <text type=&qu

  • vue2.0 根据状态值进行样式的改变展示方法

    用户在进行流程操作的时候,一般分为进行中,未开始,已完成,前端页面就要进行相应的状态区分展示.这里测试的是背景颜色区分. demo: <span class="contract-span" :class="statusText[item.status][0]">{{statusText[item.status][1]}}</span> statusText: { 0: ['span-delay', '进行中'], 1: ['span-fini

  • VUE中V-IF条件判断改变元素的样式操作

    方法一 v-if判断后用标签改变样式(特定显示列字体加粗) <v-list dense> <template v-for="(col,i) in cols"> <v-list-item :key="i" v-if="col.text=='商品码'||col.text=='通用名称'"> <v-list-item-content><b>{{col.text}}</b></

  • vue中选中多个选项并且改变选中的样式的实例代码

    1:HTML: <ul class="content"> <li v-for="(item,index) in touristList" @click="onStorage(item,index)" :class="{'active': rSelect.indexOf(item)!=-1}" :key="item.id"> <div>{{item.name}}</d

  • 基于 Vue.js 之 iView UI 框架非工程化实践记录(推荐)

    基于 Vue.js 之 iView UI 框架非工程化实践记录(推荐)

    像我们平日里做惯了 Java 或者 .NET 这种后端程序员,对于前端的认识还常常停留在 jQuery 时代,包括其插件在需要时就引用一下,不需要就删除.故观念使然,尽管 Nuget 和 Maven 用得顺溜,但对 NPM 仍不带感,兴许是周边无人带动的稀薄气氛,也或者是没参加过类似的大型活动,于是在自发性上差了许多.再者,我不用 MVVM 模式,领导也不会扣绩效. 为了快速体验 MVVM 模式,我选择了非工程化方式来起步,并选择使用 Vue.js,以及基于它构建的 iView UI 框架. V

  • vue移动端UI框架实现QQ侧边菜单组件

    vue移动端UI框架实现QQ侧边菜单组件

    最近面试发现很多前端程序员都从来没有写过插件的经验,基本上都是网上百度.所以打算写一系列文章,手把手的教一些没有写过组件的兄弟们如何去写插件.本系列文章都基于VUE,核心内容都一样,会了之后大家可以快速的改写成react.angular或者是小程序等组件.这篇文章是第一篇,写的是一个类似QQ的侧边菜单组件. 效果展示 先让大家看个效果展示,知道咱们要做的东西是个怎么样的样子,图片有点模糊,大家先将就点: 开始制作 DOM结构 整体结构中应该存在两个容器:1. 菜单容器 2. 主页面容器:因此当前

随机推荐