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. table获取checkbox是否选中的几种方法

    function test() { $(".table tbody tr").find("td:first input:checkbox").each(func ...

  2. Spring 4 官方文档学习(十一)Web MVC 框架之resolving views 解析视图

    接前面的Spring 4 官方文档学习(十一)Web MVC 框架,那篇太长,故另起一篇. 针对web应用的所有的MVC框架,都会提供一种呈现views的方式.Spring提供了view resolv ...

  3. e642. 处理拖放事件

    The drop target in this example only accepts dropped String objects. A drop target must implement Dr ...

  4. 获取作为 URL 部署清单的位置。

    ActivationContext ac = AppDomain.CurrentDomain.ActivationContext; ApplicationIdentity ai = ac.Identi ...

  5. bootstrap+PHP表单验证

    来源:http://www.sucaihuo.com/php/1814.html demo http://www.sucaihuo.com/jquery/18/1814/demo/

  6. Oracle查询优化--排序

    --普通排序 SELECT * FROM emp ORDER BY sal DESC; --使用列序排序 DESC; --组合排序 DESC; --translate函数,参数分别用A.B.C表示 S ...

  7. iOS private-api-checker私有API检测

    转自: http://www.jianshu.com/p/07779e293ca7 注:  '根目录' 指的是 private-api-checker 包的目录 iOS-private-api-che ...

  8. db2

    关于3种导入导出操作进行简单的介绍:export:导出数据,支持IXF,DEL或WSFimport:导入数据,可以向表中导入数据,支持上面提到的4种文件类型.    load:导入数据,功能和impo ...

  9. 【Deep learning】NLP

    http://www.tuicool.com/articles/EvaQJnJ http://cs224d.stanford.edu/syllabus.html

  10. mongodb php auto increment 自增

    mongodb的自增实现根oracle,postgresql是差不多,都是通过计数器来实现的. oracle自增实现: 实例说明oracle序列用法 postgresql自增实现: postgresq ...