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该如何使用?的更多相关文章

  1. angular ng build --prod 打包报错解决方案

    使用以下代码  就不报错了 ng build --prod --no-extract-license    打包命令 使用以下代码  就不报错了 ng build --prod --no-extrac ...

  2. angular ng指令

    1.指令 ng-app,ng- 都是angular的指令系统ng-app: ng-app是angular的初始化,一个页面只能有一个ng-app,位置不限制.在页面上加入了这个执行,那么从当前的元素以 ...

  3. Docker+Nginx部署Angular

    在部署Angular生产环境之前,需要电脑已经安装docker. 添加Dockerfile在已经完成的Angular项目的项目根目录下添加Dockerfile文件. Dockerfile文件内容: F ...

  4. VS Code直接调试Angular代码

    安装VS Code扩展 安装Debugger for Chrome 安装Debugger for Firefox 配置Launch.json文件 Launch.json文件的创建和生成我们可以利用VS ...

  5. 在Visual Studio 2017中使用Asp.Net Core构建Angular4应用程序

    前言 Visual Studio 2017已经发布了很久了.做为集成了Asp.Net Core 1.1的地表最强IDE工具,越来越受.NET系的开发人员追捧. 随着Google Angular4的发布 ...

  6. .Net Core应用框架Util介绍(一)

    距离上次发文,已经过去了三年半,这几年技术更新节奏异常迅猛,.Net进入了跨平台时代,前端也被革命性的颠覆. 回顾 2015年,正当我还沉迷于JQuery + EasyUi的封装时,突然意识到技术已经 ...

  7. 关于 vue 日期格式的过滤

    最近也在写公司几个单独页面,数据量比较,让前端来做,还不让angular,jquery? no no no~  对于一个前端来说绑数据那么麻烦的一款 “经典的老东西“ ,我才不用, SO~  vue ...

  8. 【Asp.Net Core】在Visual Studio 2017中使用Asp.Net Core构建Angular4应用程序

    前言 Visual Studio 2017已经发布了很久了.做为集成了Asp.Net Core 1.1的地表最强IDE工具,越来越受.NET系的开发人员追捧. 随着Google Angular4的发布 ...

  9. Net Core构建Angular4应用程序

    在Visual Studio 2017中使用Asp.Net Core构建Angular4应用程序   前言 Visual Studio 2017已经发布了很久了.做为集成了Asp.Net Core 1 ...

  10. .Net Core应用框架Util介绍(一)转

    回顾 2015年,正当我还沉迷于JQuery + EasyUi的封装时,突然意识到技术已经过时. JQuery在面对更加复杂的UI需求时显得力不从心,EasyUi虽然组件比较完善,但界面风格老旧,响应 ...

随机推荐

  1. powerdesigner与mysql数据库的连接

    (1).在桌面新建一个mysql.dpc文件,里面可以什么内容也没有. (2).打开powerdesigner,操作如下: (3).把mysql.dcp文件选中: (4).建立连接属性: (5).测试 ...

  2. in 型子查询引出的陷阱

    题: 在ecshop商城表中,查询6号栏目的商品, (注,6号是一个大栏目) 最直观的: mysql> select goods_id,cat_id,goods_name from goods ...

  3. variable `xxx' has initializer but incomplete type

    错误:variable `xxx' has initializer but incomplete type 原因:xxx对应的类型没有找到,只把xxx声明了但是没给出定义.编译器无从确认你调用的构造函 ...

  4. 关于Unity中UI中的Image节点以及它的Image组件

    一.图片的Inspector面板属性 Texture Type:一般是选择sprite(2D and UI) Sprite Mode:一般是选择Single Packing Tag:打包的标志值,最后 ...

  5. html学习笔记五

    关于服务端和client的校验问题 上述的表格信息填写后发现,即使有些信息不添,依旧能够提交 所以针对此问题,我们要在client进行数据填写信息的增强型校验(必添单元,必须填写有效信息,否则无法提交 ...

  6. 【Java集合的详细研究7】Set和List 的关系与区别

    两个接口都是继承自Collection. List (inteface) 次序是List 的最重要特点,它确保维护元素特定的顺序. --ArrayList 允许对元素快速随机访问. --LinkedL ...

  7. iOS 数据压缩与解压

    转自: http://blog.csdn.net/dkq972958298/article/details/53321804 在实际开发中,我们经常要对比较大的数据进行压缩后再上传服务器,下面是我在项 ...

  8. HBase复制

    HBase复制是一种在不同HBase部署中复制数据的方法.它能够作为一种故障恢复的方法,并提供HBase层次的高可用性.在实际应用中,比如.能够将数据从一个面向页面的集群拷贝到一个MapReduce集 ...

  9. SVN中Revert changes from this revision 跟Revert to this revision

    譬如有个文件,有十个版本,假定版本号是1,2,3,4,5,6,7,8,9,10. Revert to this revision: 如果是在版本6这里点击“Revert to this revisio ...

  10. Notepad++下载需要的插件(如何在Notepad++中手动下载需要的插件)

    需求说明: 下载在实际工作中需要的Notepad++插件,或者是因为Notepadd++设置的原因导致不能直接在软件中显示插件. 即手动登录到指定的链接中进行插件的下载. 操作过程: 1.以xmlto ...