Angular根据获取值不同给不同的样式

最新推荐文章于 2023-04-28 11:44:51 发布
VIP文章 最新推荐文章于 2023-04-28 11:44:51 发布
阅读量5.7k 收藏 1
点赞数 1
分类专栏： AngularJS知识点汇总 文章标签： Angular样式 Angular不同值不同给样式
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qianqianyixiao1/article/details/50540905
版权

1：数据源

function ctrSettingtable($scope,$routeParams) {$scope.body_data = [
  {
    "pid":"1",
    "fname":"jason",
    "lname":"kilby",
    "logname":"jasonktby",
    "company":"CAP Systems",
    "email":"[email protected]",
    "not":" ",
    "active":"0 ",
    "ass":" ",
    "eid":" ",
    " check":" "
  },
  {
    "pid":"2",
    "fname":"jason",
    "lname":"kilby",
    "logname":"jasonktby",
    "company":"CAP Systems",
    "email":"[email protected]",
    "not":" ",
    "active":"1 ",
    "ass":" ",
    "eid":"
最低0.47元/天 解锁文章
吴杼恩
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
AngularJS实现根据不同条件显示不同控件
12-11
由于项目需求，需要实现根据不同条件显示不同控件的功能。具体要求如下图所示: 即当选择“每单固定减”时，下方只显示“减免金额”一栏；  当选择“每单固定折扣”时，下方只显示“折扣比例”一栏；  当选择“每...
SASS用法指南-转
weixin_30532837的博客
01-20 111
作者： 阮一峰 日期： 2012年6月19日 原文地址：http://www.ruanyifeng.com/blog/2012/06/sass.html 艹，没想到sass 2012年就有了。现在2016年，过去4年了，才知道。太落伍了。============================================学过CSS的人都知道，它不是一种编程语言。你可以用它开发网页样式，但...
Angular框架中控制css样式
7
10-15 1万+
Angular中控制样式这话题在之前一篇文章里曾涉及：http://blog.csdn.net/u011649436/article/details/12249457     现在决定单独拿出来讨论一下。          开/关某个样式是前端编程中一个非常基本的要求，在jquery年代这功能是挺容易完成的： $('.blablabla').toggleClass('someClass
angular cli 切换 css_漫谈 Angular 定制主题的四种方式
weixin_39678163的博客
11-20 361
主题定制是提升用户体验最常见的一种，前端框架众多，主题定制方式却异曲同工，下面来介绍一下 Angular 中实现主题定制的四种方式。1. webpack loaderReact 版本的 Ant Design 使用 less-loader 加载 globalVars 与 modifyVars 变量，并通过 less 的 render 方法传递 callback 到 loader 来实现的项目的主题...
angular 控件css_Angular 4 设置组件样式的几种方式
weixin_39702714的博客
12-18 148
你用Angular吗？一.介绍如何只改动最简单的css代码，呈现完全不一样的视图效果。第一种：最基本的设置：图1 代码图2 界面运行效果图平常，想给一个label或者p等标签添加样式，我们就是这样操作，在Angular中也是一样的。现在，如果我想要将字体换成红色呢，首先想到的就是去修改.label里的color属性值，可如果样式表是封装的或者外部引用的，不方便修改呢？这时候就要用到ElementR...
scss、css样式中使用变量的方法；Vue动态改变css等样式文件中的变量
qq_45327886的博客
04-28 8718
scss、css样式中使用变量的方法；Vue动态改变css等样式文件中的变量
Angular事件之不同组件间传递数据的方法
10-17
主要介绍了Angular事件之不同组件间传递数据的方法，利用Angular Event在不同组件之间传递数据，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
angular ng-model 无法获取值的处理方法
10-17
今天小编就为大家分享一篇angular ng-model 无法获取值的处理方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
详解如何在angular2中获取节点
08-28
本篇文章主要介绍了如何在angular2中获取节点，详细的介绍了几种方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
AngularJS进阶(七)实现根据不同条件显示不同控件
热门推荐
IT全栈 华强工作室
11-20 5万+
AngularJS实现根据不同条件显示不同控件 由于项目需求，需要实现根据不同条件显示不同控件的功能。具体要求如下图所示: 即当选择“每单固定减”时，下方只显示“减免金额”一栏； 当选择“每单固定折扣”时，下方只显示“折扣比例”一栏； 当选择“每单满额减”时，下方只显示“满..减..”两栏。 根据自己对angular的了解，应该可以很轻松的实现此功能。 js设置控件
angularjs 中利用 ng-class动态设置单元格不同样式
小李的专栏
07-18 393
<style> .tr-light{ background : #dcdcdc; } .red { color : red; } </style> <table width="500"> <tr> <td>编号</td&gt...
angular 获取元素 、设置元素样式
weixin_42080477的博客
07-29 2737
angular 获取元素 、设置元素样式 import {Component, OnInit, Renderer2, OnDestroy, AfterViewInit, ElementRef} from '@angular/core'; private el: ElementRef, private renderer: Renderer2, //获取dom元素宽高 const element ...
AngularJS—通过输入的值来改变样式
生如夏花 炫至茶靡
12-10 3687
先看一下效果： 本次例子实现的是让输入框底下的div，根据用户输入的值来改变颜色。 先看html代码： angular通过输入的值来改变样式 你想要的颜色是： {{mystyle}} 这个例子的要点是通过 class="{{mystyle}}" 将input的输入值赋给class属性，从而实现改变样式的效果。首先我们得先定
angular列表页面向详情页面传值，显示不同的内容
Daylighte的博客
08-01 2601
近期项目中使用angular1.6，自己总结了列表页面向详情页面传值的问题。 需求是从此列表进入一个详情页面，需要给详情页面传入不同的值，详情页面需要接收值，显示不同的内容 &lt;a href="javascript:;"&gt; &lt;span class="btn btn-default btn-sm" ng-click='$ctrl.deal(item)' ng-if...
AngularJS改变div css样式
weixin_33957648的博客
07-26 1317
2019独角兽企业重金招聘Python工程师标准>>> ...
Angular4快速获取DOM元素，进行增删改样式等处理
简单Cere
06-25 4万+
获取DOM可能会使用原生的(如：document.getElementById('id'))；或者引入Jquery获取jquery对象获取元素。但在angular中千万别这么使用~~~因为官网API给我们提供更好的方法。1.ElementRef从官网可以看出，通过 ElementRef 我们就可以封装不同平台下视图层中的 native 元素 (在浏览器环境中，native 元素通常是指 DOM 元...
Angular4_获取table元素的高度(样式)
Martin 的博客
11-14 3772
table上 &lt;table class="table table-striped" #deliveryTable&gt; ts文件里 @ViewChild('deliveryTable') deliveryView: ElementRef; 组件加载完毕之后再执行。毕竟数据来的慢 ngAfterViewInit() { console.log(this.del...
Angular2.0如何把CSS样式加载进组件中？
沈斯明技术博客
12-19 1万+
我们有几种方式来把样式加入组件： 内联在模板的 HTML 中 设置styles或styleUrls元数据 通过 CSS 文件导入 上述作用域规则对所有这些加载模式都适用。 元数据中的样式 我们可以给@Component装饰器添加一个styles数组型属性。 这个数组中的每一个字符串（通常也只有一个）定义一份 CSS。 COPY
Angular4 动态修改样式
Martin 的博客
11-16 1万+
定义 classFlag， 在页面中用 ngClass,样式一和样式二切换； 参考：http://yunkus.com/angular-api-ngclass/
angular中获取dom
最新发布
07-14
在 Angular 中获取 DOM 元素有几种常见的方式： 1. 使用 ViewChild： 在组类中，使用 `@ViewChild` 装饰器来获取 DOM 元素的引用。首先，在组件类中导入 `ViewChild` 和 `ElementRef`，然后在类中定义一个成员变量，并使用 `@ViewChild` 装饰器来获取 DOM 元素的引用。例如： ```typescript import { Component, ViewChild, ElementRef } from '@angular/core'; @Component({ selector: 'app-my-component', template: '<div #myElement>Hello World</div>' }) export class MyComponent { @ViewChild('myElement') myElement: ElementRef; ngAfterViewInit() { console.log(this.myElement.nativeElement); } } ``` 2. 使用 Renderer2： 在组件中注入 `Renderer2`，并使用它提供的方法来访问 DOM 元素。首先，在组件类中导入 `Renderer2`，然后在构造函数中注入 `Renderer2`，最后使用 `renderer` 对象来访问和操作 DOM 元素。例如： ```typescript import { Component, Renderer2 } from '@angular/core'; @Component({ selector: 'app-my-component', template: '<div #myElement>Hello World</div>' }) export class MyComponent { constructor(private renderer: Renderer2) { } ngAfterViewInit() { const element = this.renderer.selectRootElement('#myElement'); console.log(element); } } ``` 3. 使用 ElementRef： 在组件中注入 `ElementRef`，并使用它来访问 DOM 元素。首先，在组件类中导入 `ElementRef`，然后在构造函数中注入 `ElementRef`，最后使用 `nativeElement` 属性来访问原生 DOM 元素。例如： ```typescript import { Component, ElementRef } from '@angular/core'; @Component({ selector: 'app-my-component', template: '<div #myElement>Hello World</div>' }) export class MyComponent { constructor(private elementRef: ElementRef) { } ngAfterViewInit() { console.log(this.elementRef.nativeElement); } } ``` 需要注意的是，直接操作 DOM 元素可能会违反 Angular 的封装和抽象原则，推荐优先使用 Angular 提供的数据绑定和事件绑定机制来操作和交互组件。只有在必要的情况下才使用上述方式来获取和操作 DOM 元素。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值