在学习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. java多线程模拟停车系统

    import java.util.Random; import java.util.concurrent.ArrayBlockingQueue; import java.util.concurrent ...

  2. dede 去power by dedecms

    include/dedesql.class.php 下的$arrs1和$arrs2的全注释掉

  3. ecshop 文章列表页调用描述信息啊

    1.打开 includes/lib_article.php文件 将 $sql = 'SELECT article_id, title, author, add_time, file_url, open ...

  4. 【英语】Bingo口语笔记(24) - L的发音技巧

    舌头往上跑

  5. Sqoop的使用（Mysql To HBase）

    最近需要将mysql的数据整合到HBase中,原本使用MapReduce,自己制作job将mysql的数据导入, 查阅资料过程中,发现了开源工具sqoop(关系性数据库与HDFS,HBASE,HIVE ...

  6. HDU 1423 Greatest Common Increasing Subsequence

    最长公共上升子序列   LCIS 看这个博客  http://www.cnblogs.com/nuoyan2010/archive/2012/10/17/2728289.html #include&l ...

  7. 配置java环境时，java的path地址放在其他地址的前面还是后面？

      PATH环境变量里是按顺序查找的,如果电脑里只有一个jdk,放哪都一样,有多个放前面的会优先.   一般是放在最前面吧,以免其他在path中的程序需要用到Java环境而由于在JAVA_PATH之前 ...

  8. Word2003使用VBA教程

    [正文] 注:本文中所有vba代码都是储存在doc中,而非normal.dot 1.打开一个.doc文档 2.按ALT+F11 3.左侧 Project-插入-模块 4.输入自己的代码,一定要是函数的 ...

  9. php.curl详解

    目前为目最全的CURL中文说明了,学PHP的要好好掌握.有很多的参数.大部份都很有用.真正掌握了它和正则,一定就是个采集高手了. PHP中的CURL函数库(Client URL Library Fun ...

  10. [Everyday Mathematics]20150226

    设 $z\in\bbC$ 适合 $|z+1|>2$. 试证: $$\bex |z^3+1|>1. \eex$$