文档章节

Angular实践第一弹:选项卡

t
 thecatshidog
发布于 2016/06/25 21:30
字数 546
阅读 8
收藏 0

在学习angular的过程中,实践是最好的方法。 在开发选项卡的过程中,不需要再像jquery一样以DOM操作为核心,那什么样的情况是以DOM操作为核心的Jquery的思想呢? 一想到改变什么,就想设置ID,获取元素。这就是jquery的思想。 angular的思想是一切以数据为中心,在controller中只操作数据,不去处理其他的问题。只改变数据的逻辑,不对界面进行操作。不设置class,不操作DOM,不做与界面元素有关的事情。做好分层设计,在每层做每层该干的事情。


##选项卡代码: ###css部分代码(随便写的,需要的自己写)

*{ margin:0;padding:0;}
#btn_group{list-style:none; margin:0 auto; width:850px;}
#btn_group li{ width:200px; height:40px; line-height:40px; border:1px solid black; float:left; margin:5px; text-align:center;}	 
#content{ width:800px; height:800px;  border:1px solid black; overflow:hidden; clear:both; margin:0 auto; position:relative;}
#content div{ position:absolute; top:0; left:0;}
.btn_in{ background:blue;}
.selected {background-color: lightgreen;}
.hide{display:none;}
.show{display:block;}

###html结构: ng-repeat的li是可以作为代替this来传递的,它引用的是你本身的原始数据,所以在ng-class中也可以做判断,li是否等于你选择的tab。

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
		<title>angularjs 选项卡</title>
		<script type="text/javascript" src="angular.js"></script>
	</head>
 <body ng-app="myApp" ng-controller="myCtr">
   <ul  id="btn_group">
    <li ng-repeat="li in lis" ng-click="show($index,li.links)" ng-class="{selected: $index==selected}">		
    	{{li.name}}
    </li>
   </ul>
   	<div id="content" >
   	    <div ng-repeat="div in divs" class="hide" ng-class="{show:$index==selected}">{{div.html}}</div>
   	</div>
 </body>
</html>

###js关键代码: 这里以selected作为页面和tab之间的联系枢纽,形成映射关系。通过ng-repeat的$index和ng-class的key-value值方法来做一个判断。

var app=angular.module('myApp',[]);
app.controller('myCtr',function($scope){
   //$scope.res={link:'no.html'};
   //这里的link是为了你在页面引入模板而写的,这里没有引入模板,是假数据divs
   $scope.selected=0;
   $scope.lis=[{name:'按钮一',links:'no.html'},{name:'按钮二',links:'or.html'},{name:'按钮三',links:'and.html'},{name:'按钮四',links:'xor.html'}];
   $scope.divs=[{html:'我是页面一'},{html:'我是页面二'},{html:"我是页面三"},{html:"我是页面四"}];
   $scope.show=function(row,str){
     $scope.selected=row;
    //$scope.res.link=str;
   }
});
```

© 著作权归作者所有

共有 人打赏支持
t
粉丝 0
博文 1
码字总数 546
作品 0
合肥
AngularJS 中文资料+工具+库+Demo 大搜集

中文学习资料: 中文资料且成系统的就这么多,优酷上有个中文视频。 http://www.cnblogs.com/lcllao/archive/2012/10/18/2728787.html 翻译的官方的Guide http://www.ituring.com.cn/miniboo...

liaolzy2
2015/05/31
0
0
Angular中sweetalert弹框的使用详解

最近太忙了,项目中使用的弹框老板嫌太丑,让我们优化一下,我在网上找了一下,找到了sweetalert弹框,算是比较好看的弹框了。所以我就想办法将sweetalert用到项目中,在项目中引入sweetaler...

半指温柔乐
07/21
0
0
7本学习AngularJS的免费电子书

电子书可以给我们一个有结构有组织的方式学习新的知识。学习 AngularJS也一样。现在最棒的事情莫过于电子书中提供大量实践练习,帮助我们理解各种方面。 让我们度下面7本书探究 AngularJS 吧...

咲晚杍
2015/01/28
0
0
使用Yeoman快速构建基于angular的web应用

前言 最近在学习使用安哥拉(angular.js)编写web应用,看了一些网友实践了解到yeoman,这个工具实在太好用了,必须在这里介绍一下。 angular 首先简单介绍一下angular,它是由google开源的一套...

snakelxc
2013/08/25
0
0
使用Yeoman快速构建基于angular的web应用

前言 最近在学习使用安哥拉(angular.js)编写web应用,看了一些网友实践了解到yeoman,这个工具实在太好用了,必须在这里介绍一下。 angular 首先简单介绍一下angular,它是由google开源的一套...

kisops
2013/08/25
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Confluence 6 反向跟踪

当反向跟踪(Trackback )被启用后,在任何你链接到可用启用自动发现功能的外部页面中,Confluence 将会自动发送一个方向跟踪 ping,这个 ping 能通知链接的页面有了内容改变。 Confluence 页...

honeymose
8分钟前
0
0
日期和时间API - 读《Java 8实战》

日期与时间 LocalDate 创建一个LocalDate对象并读取其值 // 根据年月日创建日期LocalDate date1 = LocalDate.of(2014, 3, 18);// 读取System.out.println(date1.getYear()); // 2014Sys...

yysue
16分钟前
0
0
8月15日任务

8月15日任务 Memcached命令行 • telnet 127.0.0.1 11211 • set key2 0 30 2 ab STORED get key2 VALUE key2 0 2 ab END 实例: [root@localhost 02]# telnet 127.0.0.1 11211-bash: te......

寰宇01
28分钟前
1
0
LNMP架构(Nginx访问日志、Nginx日志切割、静态文件不记录日志和过期时间)

Nginx访问日志 1.打开配置文件,搜索log_format vim /usr/local/nginx/conf/nginx.conf 2.访问日志常用变量含义 $remote_addr : 客户端IP(公网IP) $http_x_forwarded_for : 代理服务器的IP ...

蛋黄_Yolks
28分钟前
0
0
lombok 不用再写pojo的getset

java实体类不写get/set方法 1、下载地址https://projectlombok.org/download Myeclipse、eclipse安装lombok Lombok是一种Java实用工具,可以帮助开发人员消除Java的冗长,具体看lombok的官网...

木之下
35分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部