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

有三种方法：

1、通过$scope绑定（不推荐）
2、通过对象数组绑定
3、通过key/value键值对绑定

实现方法：

1、通过$scope绑定（不推荐）：

function ctrl($scope) {
  $scope.className = "selected";
} 
<div class="{{className}}"></div>

2、通过对象数组绑定：

function ctrl($scope) {
  $scope.isSelected = true;
} 
<div ng-class="{true:'selected',false:'unselected'}[isSelected]"></div>

当isSelected为true时，增加selected样式；当isSelected为false时，增加unselected样式。

3、通过key/value键值对绑定：

function ctrl($scope) {
  $scope.isA = true;
  $scope.isB = false;
  $scope.isC = false;
} 
<div ng-class="{'A':isA,'B':isB,'C':isC}"></div>

当isA为true时，增加A样式；当isB为true时，增加B样式；当isC为true时，增加C样式。

<ion-list>
  <ion-item ng-repeat="project in projects" ng-click="selectProject(project, $index)" ng-class="{active: activeProject == project}">
    {{project.title}}
  </ion-item>
</ion-list>

根据projects循环创建ion-item，当activeProject为当前循环到的project时，增加active样式。

几点说明：

1、不推荐第一种方法，因为controller $scope应该只有数据和行为

2、ng-class是增加相关样式，可以和class同时使用

以上就是小编为大家带来的浅谈AngularJS中ng-class的使用方法全部内容了，希望大家多多支持我们~

赞 (0)

相关推荐

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

    本文实例讲述了AngularJS使用ng-class动态增减class样式的方法.分享给大家供大家参考,具体如下: 使用ng-class可以实现动态地增减样式: <!DOCTYPE html> <html ng-app="formExample"> <head> <meta charset="UTF-8"> <title></title> <script src="../js/a

  • AngularJS中关于ng-class指令的几种实现方式详解

    前言 开发中经常会遇到这样的需求,一个元素需要在不同的状态下呈现不同的样子,而在这所谓的的样子当然就是改变其css的属性,而实现动态的改变属性值,我们就需要实现动态的更换其class属性值. 在这给大家介绍三种方法来实现,大家可以根据自己的需求来选择方式,下面来看看. 第一种:通过数据的双向绑定(不推荐) <div ng-controller="firstController"> <div ng-class="{{className}}">&

  • 详解AngularJS ng-class样式切换

    详解AngularJS ng-class样式切换

    整理文档,搜刮出一个详解AngularJS ng-class样式切换,稍微整理精简一下做下分享. 1.HTML <ion-view> <ion-content> <div class="button-bar"> <div ng-class="{true: 'bgstyle-check', false: 'bgstyle'}[isFirst]" ng-click="isFirst = !isFirst"&g

  • angularJs的ng-class切换class

    angularJs的ng-class切换class

    在angular中为我们提供了3种方案处理class: 1:scope变量绑定 2:字符串数组形式. 3:对象key/value处理. 第一种我们不推荐使用,看看其他两种解决方案: 字符串数组形式 字符串数组形式是针对class简单变化,具有排斥性的变化,true是什么class,false是什么class,其形如; <span ng-class="{true: 'btn01 hover', false: 'btn01'}[isActive]" ng-click="is

  • AngularJS基础 ng-class-odd 指令示例

    AngularJS ng-class-odd 指令 AngularJS 实例 为表格的奇数行设置 class="striped": <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"><

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

    AngularJS ng-class 指令 AngularJS 实例 修改 <div> 元素的类: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> <sty

  • AngularJS 基础ng-class-even指令用法

    AngularJS ng-class-even 指令 AngularJS 实例 为表格的偶数行设置 class="striped": <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js">&l

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

    在开发中我们通常会遇到一种需求:一个元素在不同的状态需要展现不同的样子. 而在这所谓的样子当然就是改变其css的属性,而实现能动态的改变其属性值,必然只能是更换其class属性 这里有三种方法: 第一种:通过数据的双向绑定(不推荐) 第二种:通过对象数组 第三种:通过key/value( 推荐 ) 下面简单说下这三种: 第一种:通过数据的双向绑定 实现方式: function changeClass(){ $scope.className = "change2"; } <div

  • AngularJS中ng-class用法实例分析

    本文实例讲述了AngularJS中ng-class用法.分享给大家供大家参考,具体如下: 使用 ng-class 动态设置元素的类,方法是绑定一个代表所有需要添加的类的表达式.重复的类不会添加.当表达式发生变化,先前添加的类会被移除,新类会被添加. 在angular中为我们提供了3种方案: ① 通过数据的双向绑定(不推荐使用) ② 通过对象数组. ③ 通过key/value 一.通过数据双向绑定: function changeClass(){ $scope.className = "chang

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

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

  • 浅谈angularjs中响应回车事件

    下面这个示例在输入框键入回车键或者点击按钮时,将输入框的值置为"Hello World!":(黄色背景内容为响应回车事件涉及到的代码) <html ng-app="myApp"> <head> <meta charset="utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8&quo

  • 浅谈angularJS中的事件

    什么是事件 •如同浏览器响应浏览器层的事件,比如鼠标点击.获得焦点,angular应用也可以响应angular事件 •angular事件系统并不与浏览器的事件系统相通,我们只能在作用域上监听angular事件而不是DOM事件 事件传播 因为作用域是有层次的,所以我们可以在作用域链上传递事件: •使用$emit冒泡事件,事件从当前子作用域冒泡到赋作用域,在产生事件的作用域之上的所有作用域都会收到这个事件的通知 $emit()方法带有两个参数: name  要发出的事件的名称 args   一个参数

  • 浅谈MySQL中group_concat()函数的排序方法

    浅谈MySQL中group_concat()函数的排序方法

    group_concat()函数的参数是可以直接使用order by排序的.666.. 下面通过例子来说明,首先看下面的t1表. 比如,我们要查看每个人的多个分数,将该人对应的多个分数显示在一起,分数要从高到底排序. 可以这样写: SELECT username,GROUP_CONCAT(score ORDER BY score DESC) AS myScore FROM t1 GROUP BY username; 效果如下: 以上这篇浅谈MySQL中group_concat()函数的排序方法就

  • 浅谈PHP中try{}catch{}的使用方法

    PHP中try{}catch{}的作用是用来处理异常.可以为我们收集并显示出错误信息.希望通过这篇文章的介绍,大家能掌握这一语句的应用. 在PHP语言中有许多语法需要我们去不断的熟悉,然后才能灵活的运用,编写我们需要的代码程序.在这篇文章中我们将为大家介绍PHP中try{}catch{}的用法. <?php try { //... } catch(Exception $e) { //... } ?> PHP中try{}catch{}是异常处理. 将要执行的代码放入TRY块中,如果这些代码执行过

  • 浅谈js中StringBuffer类的实现方法及使用

    如下所示: <strong>JAVA中有一个StringBuffer类,js中却没有下面来自己实现一个简单的js的StringBuffer类.</strong> //创建一个StringBuffer类 ,此类有两个方法:一个是append方法一个是toString方法 function StringBuffer() { this.__strings__ = []; }; StringBuffer.prototype.append = function(str) { this.__s

  • 浅谈JavaScript 中有关时间对象的方法

    ECMAScript中的Date类型是在早期 Java 中的 Java.unile.Date 类基础上构建的.为此 Date 类型使用自 UTC (Coordinated Universal Time, 国际协调时间)1970年1月1日午夜开始经过的毫秒数来保存日期. 在这种数据存储格式下, Date 类型保存的日期能够精确到1970年1月1日之前或之后的285616年 •Date.parse(string) 接受一个表示日期的字符串参数,然后尝试根据这个字符串返回相应日期的毫秒数,不能转换则返

  • 浅谈python中真正关闭socket的方法

    close方法可以释放一个连接的资源,但是不是立即释放,如果想立即释放,那么在close之前使用shutdown方法 shut_rd() -------关闭接受消息通道 shut_wr()--------关闭发送消息通道 shut_rdwr()-------连个通道都关闭 使用:在close()之前加上shutdown(num)即可  [shut_rd(), shut_wr(), shut_rdwr()分别代表num 为0  1  2 ] (但是测试过close()关闭,发现如果关闭后,那么ac

  • 浅谈dataframe中更改列属性的方法

    在读取文件时将整数变量读成了字符串, 或者需要转换列属性时,通过方法astype Python中 举例: dataframe.numbers=dataframe.numbers.astype(float) province.id=province.id.astype(str) R中 举例: data<-read.csv('data.csv',col.names = c('id','sex','numbers'),stringsAsFactors=FALSE),stringsAsFactors=F

  • 浅谈angularJS2中的界面跳转方法

    链接参数数组保存路由导航时所需的成分: 指向目标组件的那个路由的路径(path) 必备路由参数和可选路由参数,它们将进入该路由的URL 我们可以把RouterLink指令绑定到一个数组,就像这样: <a [routerLink]="['/heroes']">Heroes</a> 在指定路由参数时,我们写过一个双元素的数组,就像这样: this.router.navigate(['/hero', hero.id]); 我们可以在对象中提供可选的路由参数,就像这样:

随机推荐