精华内容
下载资源
问答
  • 关于[ngClass]如何使用
    2021-05-15 09:16:37

    angular学习笔记

    NgClass指令从 HTML 元素上添加和移除 CSS 类。

    说明

    CSS 类会根据表达式求值结果进行更新,更新逻辑取决于结果的类型:

    • string - 会把列在字符串中的 CSS 类(空格分隔)添加进来,

    • Array - 会把数组中的各个元素作为 CSS 类添加进来,

    • Object - 每个 key 都是要处理的 CSS 类,当表达式求值为真的时候则添加,为假则移除。

    <some-element [ngClass]="'first second'">...</some-element>
    
    <some-element [ngClass]="['first', 'second']">...</some-element>
    
    <some-element [ngClass]="{'first': true, 'second': true, 'third': false}">...</some-element>
    
    <some-element [ngClass]="stringExp|arrayExp|objExp">...</some-element>
    
    <some-element [ngClass]="{'class1 class2 class3' : true}">...</some-element>

    今天用到了第三种:[ngClass]="{'hidden_y':selectedIndex !== 1}" ,其中hidden_y为CSS类样式名,selectedIndex为ts中的一个变量,当selectedIndex !== 1为true时,当前元素会动态添加hidden_y类样式。

    更多相关内容
  • ngStyle和ngClass使用

    2021-03-14 17:40:01
    文章目录 属性形式 NgStyle NgClass 其它 ngNonBindable 属性形式 [style.属性值] [style.color]="'red'">bbbbbutton> [style.color]="false ? 'red' : 'blue'">bluebutton> 带单位的 [style.font-size.px]="20">...

    属性形式

    1. [style.属性值]
    <button [style.color]="'red'">bbbb</button>
    <button [style.color]="false ? 'red' : 'blue'">blue</button>
    
    1. 带单位的
    <button [style.font-size.px]="20">哈哈</button>
    <button [style.font-size.em]="2">哈哈</button>
    <button [style.font-size.%]="30">哈哈</button>
    

    NgStyle

    <button [ngStyle]="{'color':'pink'}">哈哈</button>
    

    NgClass

    同时操作多个class类,可以传入一个对象

    <button ngClass="{kk:true,hh:false}">哈哈</button>
    

    其它

    [class.kk]=“true” 为true,会添加类进去

    <button class="box" [class.kk]="true">哈哈</button>
    

    ngNonBindable

    花括号不会被编译

    <div ngNonBindable>
        {{aa}}
    </div>
    
    展开全文
  • 该项目是使用版本11.2.2生成的。 开发服务器 为开发服务器运行ng serve 。 导航到http://localhost:4200/ 。 如果您更改任何源文件,该应用程序将自动重新加载。 代码脚手架 运行ng generate component component-...
  • [ngClass]的简单使用

    2021-08-19 11:03:55
    [ngClass]的简单使用 [ngClass]官方定义:从 HTML 元素上添加和移除 CSS 类。 使用方法: <some-element [ngClass]="'first second'">...</some-element> <some-element [ngClass]="['first', '...

    [ngClass]官方定义:从 HTML 元素上添加和移除 CSS 类。

    参考链接:官方文档Angular中[ng-class]的使用

    使用方法:

    <some-element [ngClass]="'first second'">...</some-element>
    
    <some-element [ngClass]="['first', 'second']">...</some-element>
    
    <some-element [ngClass]="{'first': true, 'second': true, 'third': false}">...</some-element>
    
    <some-element [ngClass]="stringExp|arrayExp|objExp">...</some-element>
    
    <some-element [ngClass]="{'class1 class2 class3' : true}">...</some-element>
    

    其中key(例如代码中的first)值代表的是css样式,value值为boolean型,true为显示该样式,false为不显示该样式

    代码实践:

    <div [ngClass]="{'class1':flag1,'class2':flag2,'class3':flag3}">
          <div class="data">
          <p style="font-size:25px;">{{value1}}</p>
          <p style=" height: 10%;margin-top: 11%">/{{value2}}%</p>
    </div>
    

    通过flag1,falg2,flag3来控制class1,class2,class3样式的显示

    展开全文
  • 2.scope变量绑定,(不推荐使用) $scope.test =“classname”; < div class =”{{test}}” >< /div > 3. 象key/value方式,处理class混合 < div ng-class ="{'selected': isSelected, 'car': isCar}" ...
    <!doctype html>
    <html ng-app="firstApp">
    <head>
        <meta charset="utf-8">
        <script src="angular-1.3.0.js"></script>
    </head>
    <body>
    <style>
        .it{color:#ff7300;margin:10px;}
        .curr{background: #006600;}
        .fs18{font-size:30px;}
        .pd20{padding:20px;background:#26a3db;}
    
    </style>
    <pre>
       1.字符串数组形式。
        < div ng-class="{true: 'active', false: 'inactive'}[isActive]">< /div>
       相当于对这个求值:({true: 'active', false: 'inactive'})[false]    ({true: 'active', false: 'inactive'})[true]
        即 var ct={true: 'active', false: 'inactive'};
        ct[true]或ct[false]得到值为'active'或 'inactive'
       2.scope变量绑定,(不推荐使用)
            $scope.test =“classname”;
            < div class=”{{test}}”>< /div>
       3. 象key/value方式,处理class混合
        < div ng-class="{'selected': isSelected, 'car': isCar}">< /div>
    </pre>
    <div ng-controller="cartController">
        <div class="it {{test}}">scope变量绑定</div>
        <div class="it" ng-click="selM()" ng-class="{true: 'curr', false: ''}[isActive]">字符串数组形式,单击</div>
        <div class="it" ng-class="{'fs18': isFs, 'pd20':isPd }"  ng-click="selM3()">对象key/value方式,处理class混合..将应用it fs18 pd20 。其中it是默认的</div>
    </div>
    <script>
        var app=angular.module('firstApp',[]);//app模块名
        app.controller('cartController',function($scope){
            $scope.test='curr';//直接方式。
            $scope.isActive=false;
            $scope.selM=function(){
                $scope.isActive=true;
                console.log('当前选中否',$scope.isActive)
            }
    
            //第3种方式
            $scope.isFs=false;
            $scope.isPd=false;
            $scope.selM3=function(){
                $scope.isFs=true;
                $scope.isPd=true;
            }
        });
    
    </script>
    </body>
    </html>

     

    转载于:https://www.cnblogs.com/yuzhongwusan/p/4935337.html

    展开全文
  • ngClass定义的位置: export declare class NgClass implements DoCheck { private _iterableDiffers; private _keyValueDiffers; private _ngEl; private _renderer; private _iterableDiffer; private _...
  • ngclass用法

    千次阅读 2019-01-02 15:53:10
    1. ...[ngClass]="{true:'s2',false:'s1'} [ enable == true ]" 其中s1 s2 为样式   2. [ngClass]="{'hidden':enable}" hidden为自己写的样式。enable为true或false...
  • 关于ngClass使用

    2016-05-31 23:55:56
    第一种方式没有什么代表性,不建议使用;第二种通过一个开关控制样式;第三种通过多个开关控制样式 --> < div class = {{ classname }} > 第一种 div > < div ng-class = "{true: 'border', false: '...
  • 今天用到了ngClass来实现动态更新图标的功能,简单记录一下 图标库是 font awesome 设置 标志 classFlag &lt;i class="fa" [ngClass]="{'fa-microphone': classFlag,'fa-microphone-slash...
  • objExp">...some-element> [ngClass]="{'class1 class2 class3' : true}">...some-element> 要添加或删除单个类,请使用类绑定而不是 NgClass。 下面是在普通 HTML 中不用绑定来设置 class Attribute 的方法: ...
  • ngClass指令3种使用

    2017-02-22 23:09:00
    CSS代码:1 .strike { 2 text-decoration: line-through; 3 } 4 .bold { 5 font-weight: bold; 6 } 7 .red { 8 color: red; 9 } 1.映射语法 ...p ng-class="{strike: deleted, bold: importan...
  • Angular4中[ngClass]、[ngStyle]的基本使用

    万次阅读 2018-05-14 18:06:09
    2、ngClass  第一个参数为类名称,第二个参数为boolean值,如果为true就添加第一个参数的类 基本用法 [ngClass] = "{'text-success':true}" 判断 [ngClass] = "{'text-success':username == 'zxc'}" [ngClass] = ...
  • 直接使用 选择表达式等判断方式使用 <!-- 设置颜色为红色 --> <div [ngStyle]="{'color': 'red'}">Angular</div> <!-- 如果1==2为真,设置颜色为红色,否则绿色 --> <div [ngStyle]=...
  • 有三种方法: 1、通过$scope绑定(不推荐) 2、通过对象数组绑定 3、通过key/value键值对绑定 实现方法: 1、通过$scope绑定(不推荐): function ctrl($scope) { $scope.className = selected;...
  • 今日遇到ngClass与ngStyle的使用问题。 ngClass与ngStyle都是动态修改html样式的内置命令。 ngClass 官方文档的说明的格式: https://www.angular.cn/api/common/NgClass 1 <some-element [ngClass]="'...
  • 本文实例讲述了AngularJS使用ng-class动态增减class样式的方法。分享给大家供大家参考,具体如下: 使用ng-class可以实现动态地增减样式: <!DOCTYPE html> <html ng-app="formExample"> <head> &...
  • ng-class结合三目运算

    2016-12-29 16:00:00
    ng-class文档:https://docs.angularjs.org/api/ng/directive/ngClass 但是在实际项目中可能会用到三目运算,实例如下: <ul> <li ng-repeat="chat in chats" ng-class="$index==0?'yea':'no'"> ...
  • AngularJS ngClass条件

    2020-05-01 14:48:22
    ngClass指令可与任何评估为真或假的表达式一起使用,这有点类似于Javascript表达式,但有一些区别,您可以在这里阅读。 If your conditional is too complex, then you can use a function that returns truthy or ...
  • 2.ngClass 对象第一个参数为类名称,第二个参数为boolean值,如果为true就添加第一个参数的类 <!--第一种写法--> < div [ngClass] = " ' bgc-blank color-white ' : true(false) " > 秃然变强 div > <!--...
  • Angular ngClass 和 ngStyle 的示例 首先,进行Angular环境的搭建和项目创建 ctrl + c 结束服务 1、新建模块 ng g component components/home 如图: 2、将home模块添加到主页...ngClass使用:用于给 HTML 元素动态
  • 本篇文章主要介绍了angularJs中关于ng-class的三种使用方式说明,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 效果 二,ngSwitch 1,可据数据分情况展示: html中: 发票类型: 增值税普通发票 增值税专用发票 普通发票 效果 三,ngStyle 1,页面可直接绑定样式 提醒发货 四,ngClass 1,根据条件动态绑定样式类渲染不同样式 未...
  • Angular中不建议使用dom操作改变class。ngClass属性用来给标签动态绑定class。ngStyle属性用来给标签动态绑定CSS样式。 二、属性ngClass 实例1 <style> .className{ color: red; } </...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,177
精华内容 470
关键字:

ngClass使用