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虽然组件比较完善,但界面风格老旧,响应 ...
随机推荐
- table获取checkbox是否选中的几种方法
function test() { $(".table tbody tr").find("td:first input:checkbox").each(func ...
- 另外一款超棒的响应式布局jQuery插件 – Freetile.js
在线演示 我们曾经介绍过俩款知名的响应式布局插:isotope和masonary,今天我们这里再介绍一款相当不错的响应式布局插件 – Freetile.js,使用它同样可以生成超酷的动态布局效果.相信 ...
- LoadRunner性能分析指标解释
Transactions(用户事务分析) 用户事务分析是站在用户角度进行的基础性能分析. 1.Transation Sunmmary(事务综述) 对事务进行综合分析是性能分析的第一步,通过分析测试时间 ...
- fanqiang_bak
- 把py文件打成exe
使用pyinstaller: pyinstaller -F -w -i manage.ico demo.py -F:打包为单文件-w:Windows程序,不显示命令行窗口-i:是程序图标,demo.p ...
- unity3d绘画手册-------地形高度调节
高度 所有地形 (terrain) 编辑工具的使用都很简单.您可以在场景视图 (scene view)中逐步绘制地形 (terrain).对于高度工具和其他所有工具,您只需选中工具,然后在场景视图 ( ...
- js unicode处理
//岗位详细界面 var str="1.\u000D\u21B52.\u000D\u21B53"; var pad = function() { var tbl = []; ret ...
- asp.net mvc webconfig配置文件操作
读取web.config数据,可以不用编译.如发布后,非常有用web.config文件<configuration> <appSettings> <add key=&qu ...
- MySQL 日期与时间的处理
1.查询当前日期时间:函数有now(),localtime(),current_timestamp(),sysdate(). mysql> select now(),localtime(),cu ...
- m_pRecordset->Open
结果: