在学习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;

   }

});

angular实践第一弹：选项卡开发的更多相关文章

  1. 我的长大app开发教程第一弹：Fragment布局

    在接下来的一段时间里我会发布一个相对连续的Android教程,这个教程会讲述我是如何从零开始开发“我的长大”这个Android应用. 在开始之前,我先来介绍一下“我的长大”:这是一个校园社交app,准 ...

  2. Hadoop基础-MapReduce的工作原理第一弹

    Hadoop基础-MapReduce的工作原理第一弹 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 在本篇博客中,我们将深入学习Hadoop中的MapReduce工作机制,这些知识 ...

  3. Angular CDK Overlay 弹出覆盖物

    为什么使用Overlay? Overlay中文翻译过来意思是覆盖物,它是Material Design components for Angular中针对弹出动态内容这一场景的封装,功能强大.使用方便 ...

  4. Spring Boot 第一弹，问候一下世界！！！

    持续原创输出,点击上方蓝字关注我吧 目录 前言 什么是Spring Boot? 如何搭建一个Spring Boot项目? 第一个程序 Hello World 依赖解读 什么是配置文件? 什么是启动类? ...

  5. 关于『HTML5』第一弹

    关于『HTML5』:第一弹 建议缩放90%食用 祝各位国庆节快乐!!1 经过了「过时的 HTML」.「正当时的 Markdown」的双重洗礼后,我下定决心,好好学习HTML5  这回不过时了吧(其实和 ...

  6. typecho流程原理和插件机制浅析（第一弹）

    typecho流程原理和插件机制浅析(第一弹) 兜兜 393 2014年03月28日 发布 推荐 5 推荐 收藏 24 收藏,3.5k 浏览 虽然新版本0.9在多次跳票后终于发布了,在漫长的等待里始终 ...

  7. 初始——第一款个人开发上线app store

    最初学习iOS开发时就听人建议,程序员应该有自己的博客,来记录每天的收获,于人于己都是一件很有意义的事.但当初作为菜鸟一枚,自认为对一些知识的认识尚浅,写博客这种高大上的事和自己八竿子打不着. 现如今 ...

  8. mui-顶部选项卡-第一个选项卡内容不显示

    <div id="item1" class="mui-control-content mui-active"> <div id="s ...

  9. Java基础-程序流程控制第一弹（分支结构/选择结构）

    Java基础-程序流程控制第一弹(分支结构/选择结构) 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.if语句 1>.if语句的第一种格式 if(条件表达式){ 语句体: ...

随机推荐

  1. open行情

    日k线 只能取8年 1分钟K线 只能取五天 前复权K线出现负数的股价 后复权K线会出现上千的股价

  2. matplotlib 绘制柱状图的几个例子

    1 error bar #!/usr/bin/env python # a bar plot with errorbars import numpy as np import matplotlib.p ...

  3. 扩容盘、SD卡扩容

    内存卡的前世今生回想当年,大家都还在用着非智能机,由于功能单一,需要存储的数据也就是通讯录和短信.虽然那时也有手机游戏,但大多都是几十KB,并不需要太大的存储空间.但随着手机功能的多样化,尤其是音乐. ...

  4. 安卓 Input Events(输入事件)

    在安卓中,有不止一种方法从你的应用截取用户交互事件.在你的用户界面中考虑事件,途径就是从用户界面中的一个指定的view对象中捕获事件.该view提供了这样做的方法. 在你用来组成你布局的不同的view ...

  5. appdata文件夹有什么用途？C盘appdata可以删除吗？

    在内存紧张的时候,我们都会选择删除一些无关紧要的大文件来释放内存,有不少网友发现在系统C盘下有一个appdata文件夹,而且体积挺大的,不知道能不能删除,针对此问题,本文就为大家介绍appdata文件 ...

  6. Python学习2-列表和元组

    Python学习2-列表和元组 标签(空格分隔): 列表 元组 在Python中,最基本的数据结构是序列(sequence).序列中的每个元素被分配一个序号--即元素的位置,也称为索引.索引从0开始. ...

  7. Eclipse c++环境搭建 并加载OpenCV库 2015最新

    C++: 搜索 Eclipse c++ 即可 注意新版的mingw安装器,要安装: 1.mingw-developer-toolkit 2.mingw32-base 3.mingw32-gcc-g++ ...

  8. 使用服务器端控制AJAX页面缓存

    你知道 response.setHeader("Cache-Control","no-cache"); 这条语句是干什么的吗? 这是用来防止浏览器缓存动态内容生 ...

  9. CentOS 6.0 缺少 mcrypt 扩展 解决办法

    解决办法:安装php-mcrypt libmcrypt libmcrypt-devel这三个库文件 1.安装第三方yum源(默认yum源里面没有这几个库文件,不能使用yum安装) #wget http ...

  10. [转] C#操作Excel文件

    来自  jbp74c37ad170 的文章EXCEL编程语句有那些啊 全面控制 Excel首先创建 Excel 对象,使用ComObj:Dim ExcelID as Excel.Application ...