angular -- ng-class该如何使用?
ng-class是一个判断是否给某一个元素添加类名的属性:
例如:下面是判断 是否添加 aHover 这个类名:
<ul class="nav fl w120 o">
<li><a ng-click="homeClick()" ng-class="{true:'aHover',false:''}[homeHover]">首页</a></li>
<li><a ng-click="selectedClick()" ng-class="{aHover: selectedHover == true}">精选</a></li>
<li><a ng-click="channelClick()" ng-class="{aHover: channelHover}">频道</a></li>
<li><a ng-click="collectClick()" ng-class="{aHover: collectHover}">我的收藏</a></li>
</ul>
具体JS:
myApp.controller('myAppController',['$scope',function($scope){
$scope.homeHover = true;
$scope.selectedHover = false;
$scope.channelHover = false;
$scope.collectHover = false;
$scope.homeClick = function(){
$scope.homeHover = true;
$scope.selectedHover = false;
$scope.channelHover = false;
$scope.collectHover = false;
};
$scope.selectedClick = function(){
$scope.homeHover = false;
$scope.selectedHover = true;
$scope.channelHover = false;
$scope.collectHover = false;
};
$scope.channelClick = function(){
$scope.homeHover = false;
$scope.selectedHover = false;
$scope.channelHover = true;
$scope.collectHover = false;
};
$scope.collectClick = function(){
$scope.homeHover = false;
$scope.selectedHover = false;
$scope.channelHover = false;
$scope.collectHover = true;
};
}]);
angular -- ng-class该如何使用?的更多相关文章
- angular ng build --prod 打包报错解决方案
使用以下代码 就不报错了 ng build --prod --no-extract-license 打包命令 使用以下代码 就不报错了 ng build --prod --no-extrac ...
- angular ng指令
1.指令 ng-app,ng- 都是angular的指令系统ng-app: ng-app是angular的初始化,一个页面只能有一个ng-app,位置不限制.在页面上加入了这个执行,那么从当前的元素以 ...
- Docker+Nginx部署Angular
在部署Angular生产环境之前,需要电脑已经安装docker. 添加Dockerfile在已经完成的Angular项目的项目根目录下添加Dockerfile文件. Dockerfile文件内容: F ...
- VS Code直接调试Angular代码
安装VS Code扩展 安装Debugger for Chrome 安装Debugger for Firefox 配置Launch.json文件 Launch.json文件的创建和生成我们可以利用VS ...
- 在Visual Studio 2017中使用Asp.Net Core构建Angular4应用程序
前言 Visual Studio 2017已经发布了很久了.做为集成了Asp.Net Core 1.1的地表最强IDE工具,越来越受.NET系的开发人员追捧. 随着Google Angular4的发布 ...
- .Net Core应用框架Util介绍(一)
距离上次发文,已经过去了三年半,这几年技术更新节奏异常迅猛,.Net进入了跨平台时代,前端也被革命性的颠覆. 回顾 2015年,正当我还沉迷于JQuery + EasyUi的封装时,突然意识到技术已经 ...
- 关于 vue 日期格式的过滤
最近也在写公司几个单独页面,数据量比较,让前端来做,还不让angular,jquery? no no no~ 对于一个前端来说绑数据那么麻烦的一款 “经典的老东西“ ,我才不用, SO~ vue ...
- 【Asp.Net Core】在Visual Studio 2017中使用Asp.Net Core构建Angular4应用程序
前言 Visual Studio 2017已经发布了很久了.做为集成了Asp.Net Core 1.1的地表最强IDE工具,越来越受.NET系的开发人员追捧. 随着Google Angular4的发布 ...
- Net Core构建Angular4应用程序
在Visual Studio 2017中使用Asp.Net Core构建Angular4应用程序 前言 Visual Studio 2017已经发布了很久了.做为集成了Asp.Net Core 1 ...
- .Net Core应用框架Util介绍(一)转
回顾 2015年,正当我还沉迷于JQuery + EasyUi的封装时,突然意识到技术已经过时. JQuery在面对更加复杂的UI需求时显得力不从心,EasyUi虽然组件比较完善,但界面风格老旧,响应 ...
随机推荐
- 将sqlServer上的数据库文件进行盘目的迁移
在数据库客户端创建数据库时要改为.mdf文件,因为附加问价时附加的是.mdf文件: 在里选中相应的数据库 右键->任务-分离 在 剪切到相应的想放置的盘目. 例如迁移到E盘下: 在数据库-> ...
- 231个javascript特效分享
1.文本框焦点问题onBlur:当失去输入焦点后产生该事件onFocus:当输入获得焦点后,产生该文件Onchange:当文字值改变时,产生该事件Onselect:当文字加亮后,产生该文件 <i ...
- 【转】JS函数集合大全
1.document.write(""); 输出语句 2.JS中的注释为// 3.传统的HTML文档顺序是:document->html->(head,body) 4. ...
- NGUI使用教程 安装NGUI插件
我的使用的是unity4.2,大家可以去官网下载最新版本的http://unity3d.com/unity/download作为一个开发人员安装编译器是最基本的常识,相信大家都能正确安装.安装成功号桌 ...
- matlab下使用svmlib工具包
虽然网络上已经有了很多的类似的东西了吧.但是呢,我自己还是要写一写的. 安装: 对于 libsvm工具包,我们可以去官方网站下载,网址为:http://www.csie.ntu.edu.tw/~cjl ...
- e575. The Quintessential Drawing Program
To draw on the screen, it is first necessary to subclass a JComponent and override its paint() metho ...
- Java运行时,各种类型存储介绍
Java的内存分配 Java程序运行时的内存结构分成:方法区.栈内存.堆内存.本地方法栈几种. 方法区 存放装载的类数据信息,包括:基本信息:每个类的全限定名.每个类的直接超类的全限定 ...
- perl 脚本将phred33 转换为phred64
今天用fastx_tookit 时遇到问题, 我的fastq 文件的碱基质量值格式为phred33, 而fastq_tookit 默认碱基质量值的格式为phred64, 所以报错了,提示我的fastq ...
- 搞笑的<Button></Button>
<button>竟然默认是submit按钮</button>.........................
- 【Java面试题】47 heap和stack有什么区别
java的内存分为两类,一类是栈内存,一类是堆内存.栈内存是指程序进入一个方法时,会为这个方法单独分配一块私属存储空间,用于存储这个方法内部的局部变量,当这个方法结束时,分配给这个方法的栈会释放,这个 ...