AngularJS中ng-class使用方法

有三种方法:

1、通过$scope绑定(不推荐)

2、通过对象数组绑定

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

实现方法:

1、通过$scope绑定(不推荐):

function ctrl($scope) {
$scope.className = "selected";
}

2、通过对象数组绑定:

function ctrl($scope) {
$scope.isSelected = true;
}

当isSelected为true时,增加selected样式;当isSelected为false时,增加unselected样式。

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

function ctrl($scope) {
$scope.isA = true;
$scope.isB = false;
$scope.isC = false;
}

当isA为true时,增加A样式;当isB为true时,增加B样式;当isC为true时,增加C样式。

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

几点说明:

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

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

原文地址:https://www.cnblogs.com/chaixiaoxia/p/8330134.html

时间: 2024-12-14 23:09:57

AngularJS中ng-class使用方法的相关文章

angularJs中的常用工具方法

前面说过在angularJs中使用 angular.module() 法可创建一个angularJs模块.除此之外,angularJs还提供了一些工具方法供我们使用. angular.isArray() //判断传入的参数是不是数组,是则返回true 否则返回false angular.isDate() //判断传入的参数是不是时间对象,是则返回true,否则返回false angular.isFunction() //判断传入的参数是不是函数,是则返回true,否则返回false angula

angularJs中ng一些内置的工具方法:

1.angular.equals: (1)两个参数满足===比较返回true;(2)两个参数是同一种类型,同时他们的每一个属性通过angular.equals都是返回true:(3)两个都是NAN(在js中虽然NAN==NAN为false,但是这里为true);(4)两个对象代表同一个正则表达式,如/abc/==/abc/(虽然在js中返回false) 2.angular.copy: 创建来源source的一个深度克隆对象,可以是一个对象或者数组.如果没有指定destination那么就会返回一

angularjs中常用的工具方法

一.angular.bind(self, fn, args) 1.作用:返回一个新的函数,绑定这个函数的this指向self 2.参数: self:新函数的上下文对象 fn:需要绑定的函数 args:传递给函数的参数 3.返回值:this指向self的新函数 4.备注:bind会根据你的参数类型来决定调用call或apply,所以args可以是一个个数据,也可以是一个数组. 二.angular.copy(source, [destination]) 1.作用:对象的深拷贝 2.参数: sourc

AngularJS学习--- AngularJS中XHR(AJAX)和依赖注入(DI) step5

前言:本文接前一篇文章,主要介绍什么是XHR,AJAX,DI,angularjs中如何使用XHR和DI. 1.切换工具目录 git checkout -f step-5 #切换分支 npm start #启动项目 2.什么是XHR和依赖注入(Dependency Injection)? 1)什么是XHR? XHR是XMLHttpRequest的简称,XMLHttpRequest 用于在后台与服务器交换数据,主要是为了实现在不重新加载整个网页的情况下,对网页的某部分进行更新.简单说,浏览器中URL

AngularJs中的模块化

一个简单的 angularJs 例子如下所示: <!DOCTYPE html> <html ng-app> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="angular.min.js"></script> </head> <b

angularJS中$apply()方法详解

这篇文章主要介绍了angularJS中$apply()方法详解,需要的朋友可以参考下 对于一个在前端属于纯新手的我来说,Javascript都还是一知半解,要想直接上手angular JS,遇到的阻力还真是不少.不过我相信,只要下功夫,即使是反人类的设计也不是什么大的问题. Okay,废话不多说.为了弄明白angular JS为何物,我先是从Scope开始.那么什么是Scope呢?借用官方文档的一段话: 代码如下: "scope is an object that refers to the a

AngularJS进阶(三十三)书海拾贝之简介AngularJS中使用factory和service的方法

简介AngularJS中使用factory和service的方法 AngularJS支持使用服务的体系结构"关注点分离"的概念.服务是JavaScript函数,并负责只做一个特定的任务.这也使得他们成为维护和测试的单独实体.控制器,过滤器可以调用它们作为需求的基础.服务使用AngularJS的依赖注入机制注入正常. AngularJS提供例如许多内在的服务,如:$http, $route, $window, $location等.每个服务负责例如一个特定的任务,$http是用来创建AJ

AngularJS中监视Scope变量以及外部调用Scope方法

在AngularJS中,有时候需要监视Scope中的某个变量,因为变量的改变会影响一些界面元素的显示.有时,也希望通过jQuery调用Scope的某个方法. 比如以下场景: <div> <button id="jQBtn">jQ Button</button> </div> <div id="ngSection" ng-controller="NGCtrl"> <input typ

通过几段代码,理清angularJS中的$injector、$rootScope和$scope的概念和关联关系

$injector.$rootScope和$scope是angularJS框架中比较重要的东西,理清它们之间的关系,对我们后续学习和理解angularJS框架都非常有用. 1.$injector其实是一个IOC容器,包含了很多服务(类似于spring框架中的bean),其它代码能够通过       $injector.get("serviceName")的方式,从injector中获取所需要的服务.详情参考这篇文章 2.scope是angularJS中的作用域(其实就是存储数据的地方)

AngularJS 中 异步请求$http 对象的使用

 AngularJS 提供了一个类似jquery的$.ajax的对象,用于异步请求. 在AngularJS中对异步操作是推崇至极的,所以$http的操作都是异步的不像jquery.ajax里还提供了async参数. 对于官网的$http对象的总结和使用. 用法: $http(config); 参数: config (常用的参数标红,翻译了一下) config object Object describing the request to be made and how it should b