当我们使用angularjs的路由时，时常会出现一个需求，当选中菜单时把当前菜单的样式设置为选中状态(多数就是改变颜色)



接下来就看看Angular-UI-Router里的指令ui-sref-active 的使用

其意思就是查看当前激活状态并设置 Class

代码：

<!DOCTYPE html>

<html ng-app="app">

<head>

<title>嵌套视图</title>

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

<meta http-equiv="description" content="this is my page">

<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<link rel="stylesheet"

	href="../../plugins/bootstrap/css/bootstrap.min.css" type="text/css"></link>

<style type="text/css">

.active1 {

	background-color: green!important;

}

</style>

</head>

<body>

	<div class="container">

		<nav class="navbar navbar-default" role="navigation">

			<div class="container-fluid">

				<div class="navbar-header">

					<ul class="nav navbar-nav">

						<li ui-sref-active="active1" class=""><a class="navbar-brand" ui-sref="index1"

							>index1</a>

						</li>

						<li ui-sref-active="active1"><a class="navbar-brand" ui-sref="index2"

							>index2</a>

						</li>

						<li ui-sref-active="active1"><a class="navbar-brand" ui-sref="index3"

							>index3</a>

						</li>

					</ul>

				</div>

			</div>

		</nav>

	</div>

	<div ui-view></div>

</body>

<script type="text/javascript"

	src="../../plugins/angular/angular.min-1.4.6.js"></script>

<script type="text/javascript"

	src="../../plugins/angular/angular-ui-router-0.2.10.js"></script>

<script type="text/javascript">

	var app = angular.module("app", [ 'ui.router' ]);

	app.config(

			[ '$stateProvider', '$urlRouterProvider',

					function($stateProvider, $urlRouterProvider) {

						$stateProvider.state('index2', {

							url : '/index2',

							templateUrl : '/Angular/uiview/nested/index2.html'

						}).state('index1', {

							url : '/index1',

							templateUrl : '/Angular/uiview/nested/index1.html'

						}).state('index3', {

							url : '/index3',

							templateUrl : '/Angular/uiview/nested/index3.html'

						});

						$urlRouterProvider.otherwise('/index2');

					} ]).config(function($sceProvider) {

		$sceProvider.enabled(false);

	});

	app.controller("view1_controller", function($stateParams) {

		alert($stateParams.param)

	})

</script>

</html>

当我们点击index3跳转到index3页面时，菜单为选中状态。实际上是设置了ui-sref-active="active1"当选中后当前li标签的class被设置为active1，就是自己定义的actice1的样式



[置顶] AngularJS实战之路由ui-sref-active使用的更多相关文章

  1. AngularJS实战之路由ui-view传参

    angular路由传参 首页 <!DOCTYPE html> <html ng-app="app"> <head> <title>路 ...

  2. AngularJS实战之路由ui-view

    1. 路由(ui-router) 1.1. 环境 1) angular.min.js 2) angular-ui-router-0.2.10.js 3) 确保确保包含ui.router为模块依赖关系. ...

  3. 算法代码[置顶] 机器学习实战之KNN算法详解

    改章节笔者在深圳喝咖啡的时候突然想到的...之前就有想写几篇关于算法代码的文章,所以回家到以后就奋笔疾书的写出来发表了 前一段时间介绍了Kmeans聚类,而KNN这个算法刚好是聚类以后经常使用的匹配技 ...

  4. [置顶] 【IOS】IOS7 UI适配

    昨天下了把手机升级成了IOS7 正式版,然后下了最新的xocde5.  试着编译了一下刚刚完成的几个应用,还好问题不大,半个小时的时间都适配好了,然后改了下几个新出现的warning.过几天等空了,要 ...

  5. [置顶] JQuery实战总结三 标签页效果图实现

    在浏览网站时我们会看到当我们鼠标移到多个选项卡上时,不同的选项卡会出现自己对应的界面的要求,在同一个界面上表达了尽量多的信息.大大额提高了空间的利用率.界面的切换效果也是不错的哦,这次自己可以实现啦. ...

  6. AngularJS实战之Controller之间的通信

    我们时常会在不同controller之间进行通信,接下来就介绍三种controller之间的通信方式 一.使用$on.$emit和$broadcast进行controller通信 虽然AngularJ ...

  7. AngularJS ui-router (嵌套路由)

    http://www.oschina.net/translate/angularjs-ui-router-nested-routes AngularJS ui-router (嵌套路由) 英文原文:A ...

  8. [转]AngularJS ui-router (嵌套路由)

    本文转自:http://www.oschina.net/translate/angularjs-ui-router-nested-routes http://www.codeproject.com/A ...

  9. 《AngularJs实战》学习笔记(慕课网)

    1. Controller使用过程中的注意点 不要试图去复用Controller, 一个控制器一般只负责一小块视图 不要在Controller中操作DOM, 这不是控制器的职责. 封装在指令里. 不要 ...

随机推荐

  1. tomcat-maven-plugin的使用

    maven有一个把web应用部署到tomcat下的插件 tomcat-maven-plugin , 我们可以使用这个插件把web应用一键式的部署到一个远程的tomcat中. 插件的url: http: ...

  2. 学习javascript怎么入门,初学者5条建议

    你是否已经初步掌握了html和css,但完全不知道从何入手Java?如果是,这里总结了5条建议,帮助JavaScript初学者总结学习方法,提高学习效率. 一.多看视频少看书 对初学者而言,看书的效率 ...

  3. springboot添加fluent日志记录

    istio默认会进行日志的记录,但是仅仅记录到服务.以及服务之间调用的信息,不记录业务日志. 如: 所以需要添加业务日志记录. 1.引入依赖 <dependency>     <gr ...

  4. 解决 win 7 64 位 vs2010 调试silverlight项目无法加载，提示更新developer ,跟新报 消息 ID: 1517 已安装了 Silverlight 的 64 位版本

    出现上面的问题是我们安装的silverlight的版本和系统给的silverlight下载的版本冲突, 解决的方法是,首先卸载Silverlight runtime(也就是默认的silverlight ...

  5. java8 数据结构的改变（一）

    在JDK1.6,JDK1.7中,HashMap采用数组+链表实现,即使用链表处理冲突,同一hash值的链表都存储在一个链表里.但是当数组中一个位置上的元素较多,即hash值相等的元素较多时,通过key ...

  6. 789A Anastasia and pebbles

    A. Anastasia and pebbles time limit per test 1 second memory limit per test 256 megabytes input stan ...

  7. 20172306 《Java程序设计与数据结构》第七周学习总结

    20172306<Java程序设计>第七周学习总结 教材学习内容总结 这一章的标题是继承.主要学习了有关继承的相关知识.其中在这五节中,我学到了以下几点: 1.继承主要表达的是" ...

  8. Squares of a Sorted Array LT977

    Given an array of integers A sorted in non-decreasing order, return an array of the squares of each ...

  9. https传输过程嗅探

    C1->浏览器告知服务器自身的信息 length = 165 a5 16 03 01 00 A0 01 00 00 9C 03 03 5E 1C 37 CD 40 [ ^ 7 @] B6 4A ...

  10. 科学技术库Numpy

    一.生成矩形操作 1)numpy获取的数据是以  “,”  为分割的数据结构,来生成矩阵 注意:skip_header=1 去掉行首,即说明行 ,Cao jin,,,python,-- ,张二毛,,, ...