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虽然组件比较完善,但界面风格老旧,响应 ...
随机推荐
- 用 CSS 实现打印显示底色
上一篇有讲到如何在浏览器端实现打印功能.后面发现有个问题,就是表格表头有背景颜色,但是实际打印出来无背景颜色.网上的方法主要有以下几种实现方式: 1.把背景颜色写成行内样式,如下图所示: 但是发现这样 ...
- js彈出層或者js彈出引用url Frame 層
function Popup() { var _this = this; this.CssName = "layermask";//樣式 //遮蓋層 this.hiddLayer ...
- Oracle数据库中,在SQL语句中连接字符串的方法是哪个?(选择1项)
Oracle数据库中,在SQL语句中连接字符串的方法是哪个?(选择1项) A.cat B.concat C.join D.+ 解答:B
- hunnu--11547--你的组合数学学得怎样?
你的组合数学学得怎样? Time Limit: 1000ms, Special Time Limit:2500ms, Memory Limit:65536KB Total submit users: ...
- QMainWindow + QtabWidget 实现 菜单栏 和 标签
from PyQt5.QtWidgets import ( QMainWindow, QMenu, QAction, QTabWidget) if __name__ == '__main__': im ...
- Webpack vs Gulp(转载)
理想的前端开发流程 在说构建工具之前得先说说咱期望的前端开发流程是怎样的? 写业务逻辑代码(例如 es6,scss,pug 等) 处理成浏览器认识的(js,css,html) 浏览器自动刷新看到效果 ...
- optimization blocks (csapp chapter 5.1)
p_511 编译器在没有指示下,会做‘ safe optimization',因此有些优化在没有参数的指示下是不会对代码做优化的,故在程序中应该避免某一类代码,因为它们妨碍了编译器做优化. optim ...
- Java 9的日期时间格式化趋近Unicode区域设置标准
1.JDK-8148947,DataTimeFormatter的模式字母“g”:正如在LDML中定义的,字母“g”指代一个“简化儒略日期”,简化儒略日期与正常儒略日期的差别在于:(1)简化儒略 ...
- NHibernate实例
1. 下载相关资源: 下载NHibernate.下载地址: http://nhforge.org/Default.aspx 下载微软Northwind示例数据库,下载地址:http://www.mic ...
- ajax的原理及实现方式
Ajax:Asynchronous javascript and xml,实现了客户端与服务器进行数据交流过程同时是异步发送请求.使用技术的好处是:不用页面刷新,并且在等待页面传输数据的同时可以进行其 ...