`
刘朝雪
  • 浏览: 83742 次
  • 来自: 河北
社区版块
存档分类
最新评论

angular ng-class 的三种用法

 
阅读更多

1.$scope变量绑定

controller代码

   $scope.test ="classname";

 html代码

<div class="{{test}}"></div>

提示:这种方法这么用是没有问题的。但是严格来说,他是不可以这么用的,有点诡异。

2.字符串数组形式

 

controller代码

    $scope.isActive = true;

  html代码

<div ng-class="{true: 'active', false: 'inactive'}[isActive]"></div>

 isActive = true;,则使用名字为 active的class,否则使用名字为inactive的class。

3.对象key/value处理

 

controller代码

 $scope.isSelected = true;
    $scope.isCar = false;

   html代码

<div ng-class="{'selected': isSelected, 'car': isCar}"></div> 

 当 isSelected = true 则增加selected class,

当isCar=true,则增加car class。这种方式可以根据不同的情况添加多个类。

 

 

分享到:
评论

相关推荐

    Angular ng-animate和ng-cookies用法详解

    `ng-animate`是Angular的一个插件模块,它允许开发者在Angular的特定事件(如`ng-show`、`ng-hide`、`ng-repeat`等)触发时添加动画效果。在使用`ng-animate`之前,需要在HTML入口文件中引入Angular的核心库`angular...

    Angular ng-class详解及实例代码

    本篇文章将详细解释`ng-class`的使用方法,并通过实例代码来演示其功能。 首先,我们来看一下`ng-class`的基本语法。`ng-class`接受三种不同的值类型: 1. **字符串数组形式**:适用于简单的类切换,通常涉及到两...

    angular模板加载——ng-template

    在开发过程中,理解`ng-template`的工作原理和用法对于提升Angular应用的性能和用户体验至关重要。同时,熟练掌握如何结合`ViewContainerRef`和`TemplateRef`进行动态视图管理也是Angular开发者必备的技能之一。通过...

    详解angularJs中关于ng-class的三种使用方式说明

    本文将详细介绍ng-class在AngularJS中的三种使用方式,并分析其各自的适用场景与优缺点。 一、通过数据的双向绑定使用ng-class 第一种方法是利用AngularJS的数据绑定特性来实现ng-class的功能。这种方式下,我们...

    angular ng-click防止重复提交实例

    为了解决这个问题,本文将介绍两种方法来防止 Angular ng-click 的重复提交实例。 方法一:使用指令 disable 按钮 在 Angular 中,我们可以使用指令来 disable 按钮,以防止用户多次点击。下面是一个简单的示例: ...

    关于angular引入ng-zorro的问题浅析

    引入Ng-Zorro到Angular项目中主要有两种方式:第一种是通过官方提供的预构建版本,第二种是自定义构建。本文主要讨论的是第二种方法,即自定义构建过程。 首先,确保已经安装了Angular CLI,这是Angular开发的基础...

    Highlight-a-selected-row-in-ng-repeat-using-ng-class:使用 ng-class Angular JS 突出显示 ng-repeat 中的选定行

    在本教程中,我们将探讨如何结合使用`ng-repeat`和`ng-class`来实现这一功能。 首先,我们需要一个简单的HTML结构,其中包含一个`ng-repeat`指令来遍历数据集: ```html &lt;tr ng-repeat="item in items" ng-class...

    angular-ng-autocomplete:Angular的NPM软件包:https:www.npmjs.compackageangular-ng-autocomplete

    角度自动完成观看或在尝试...@ NgModule ( { declarations : [ AppComponent ] , imports : [ AutocompleteLibModule ] , bootstrap : [ AppComponent ]} )export class AppModule { }用法样本&lt; div class =" ng-aut

    ng-multiselect-dropdown:多选下拉组件

    角度多选下拉菜单 Web应用程序的角度多选下拉组件。... ] // ...} )export class AppModule { }用法import { Component , OnInit } from '@angular/core' ;import { IDropdownSettings } from 'ng-multiselec

    浅谈Angular2 ng-content 指令在组件中嵌入内容

    Angular2 中的 ng-content 指令是一种强大的工具,用于在组件中嵌入内容。它允许开发者在组件中插入模板代码,从而实现灵活的组件复用。 ng-content 指令的工作原理是将父组件模板中包含的内容插入到子组件中指定的...

    AngularJS使用ng-class动态增减class样式的方法示例

    首先,`ng-class`可以接受三种类型的值: 1. **对象映射方式**: 在示例中,`&lt;p ng-class="{strike: deleted, bold: important, red: error}"&gt;`就是使用对象映射方式的例子。这里的`{strike: deleted, bold: ...

    浅谈AngularJS中ng-class的使用方法

    有三种方法: 1、通过$scope绑定(不推荐) 2、通过对象数组绑定 3、通过key/value键值对绑定 实现方法: 1、通过$scope绑定(不推荐): function ctrl($scope) { $scope.className = selected; } &lt;div class={...

    Angular中ng-options下拉数据默认值的设定方法

    本篇文章聚焦于如何在使用`ng-options`时设定下拉列表的默认选中值。我们将通过一个具体的示例来详细解释这一过程。 首先,我们来看一下HTML部分: ```html &lt;div class="form-group"&gt; &lt;label class="col-sm-2 ...

    ng-virtual-keyboard:Angular应用程序的虚拟键盘

    ng-虚拟键盘这是什么? Angular应用程序的虚拟键盘安装步骤1:安装@ protacon / ng-virtual-keyboard $ npm ... NgVirtualKeyboardModule , ] , ...} )export class AppModule { }用法简单用法示例 &lt; input type

    AngularJS入门教程之ng-class 指令用法

    在本文中,我们将深入探讨`ng-class`指令的用法、定义、语法以及实例,帮助初学者更好地理解和应用这个功能。 ### ng-class 指令的基本概念 `ng-class`指令允许我们在AngularJS应用中根据变量的值或表达式的计算...

    angularjs下ng-repeat点击元素改变样式的实现方法

    本篇文章将详细探讨如何在AngularJS下使用`ng-repeat`和`ng-class`实现这样的功能。 首先,让我们回顾一下`ng-repeat`的基本用法。`ng-repeat`接收一个表达式,该表达式通常是一个数组或对象的迭代。例如,如果你有...

    Angularjs中ng-repeat-start与ng-repeat-end的用法实例介绍

    ng-repeat-start与ng-repeat-end时AngularJS(1.2.x)扩展的,使用这两个指令可以灵活控制遍历形式。 例如: index.html &lt;div class=uk-panel ng-controller=UserCtrl&gt; &lt;ul class=uk-list&gt; &lt;li ng-repeat-start=...

    angular-popups, 基于Angularjs的浮层组件.zip

    4. `README.md`文件:项目介绍、安装指南及使用方法等信息。 要将Angular-popups集成到你的项目中,首先需要确保你的项目已经引入了AngularJS库。然后可以通过以下方式安装: - 使用npm:`npm install angular-...

    ng-excel-export:将JSON对象导出到Excel的Angular服务

    下面将详细介绍这个服务的工作原理、使用方法以及其在实际项目中的应用。 首先,`ng-excel-export` 服务依赖于 `xlsx` 库,这是一个流行的JavaScript库,用于处理Excel文件。`xlsx`库支持读写XLSX、XLSM、XLSB等...

    angular.js-master

    - **内置指令**:AngularJS提供了一系列内置指令,如ng-model、ng-class等。 ### 9. 过滤器(Filters) - **过滤器**:用于格式化数据,如日期过滤、货币过滤、数组过滤等。 ### 10. 路由(Routing) - **...

Global site tag (gtag.js) - Google Analytics