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虽然组件比较完善,但界面风格老旧,响应 ...
随机推荐
- laravel 参数配置
1:在项目根目录下有个叫.env的文件.这个文件是配置配置.由config文件下的app.php 直接读取. #参数解释 APP_ENV=local #访问地址 APP_DEBUG=true #是否开 ...
- MYSQL的用户变量(@)和系统变量(@@)
9.3. 用户变量 可以先在用户变量中保存值然后在以后引用它:这样可以将值从一个语句传递到另一个语句.用户变量与连接有关.也就是说,一个客户端定义的变量不能被其它客户端看到或使用.当客户端退出时,该客 ...
- 15款很棒的 JavaScript 开发工具
在开发中,借助得力的工具可以事半功倍.今天,我爱互联网向大家分享最新收集的15款非常有用的 javascript 开发工具. TestSwarm: Continious & Distribut ...
- WPF查找子控件和父控件方法
一.查找某种类型的子控件,并返回一个List集合 public List<T> GetChildObjects<T>(DependencyObject obj, Type ty ...
- tRNA 二级结构预测可视化
tRNAdb 收录了来自104个物种的623条tRNA 序列,从数据库中下载对应物种的tRNA 序列和二级结构,以人为例 打开下面的链接 http://trna.bioinf.uni-leipzig. ...
- oracle的varchar2和clob类型在hibernate中使用
1.在oracle中 varchar2的最大长度为4000 bytes,即varchar2(4000),最多能储存2000个汉子或4000位的数字字母.当储存值超过时可以使用clob(Characte ...
- 这款Office密码破解工具,无坚不摧!
你是否曾经陷入过这样的尴尬:因为忘记Word文档密码去找了一个Word密码破解工具,接着又忘记Excel文档密码去找了一个专门破击Excel的工具,那么如果忘记PowerPoint.Outlook.P ...
- Office密码破解不求人!
你用Office吗?你会为你的Office文档加密吗?如果Office密码忘了求人吗?最后一个问题是不是让你很头大,求人办事不是要费钱就是要靠人情,不如自己拥有一款强大的密码破解工具,想要Office ...
- C# 哈希加密
1.方法一: [c-sharp] view plaincopy //适用于C#语言 //使用前需导入以下命名空间:using System.Web.Security; //第一个参数为需加密的字符串, ...
- Python 使用正则表达式匹配URL网址
使用正则表达式匹配以 .com 或 .cn 为域名后缀的URL地址 In [1]: import re In [2]: str = "http://www.baidu.com/" ...