在学习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. CodeIgniter 3之Session类库(2)（转）

    CI3的Session的重大改变就是默认使用了原生的Session,这符合Session类库本来的意思,似乎更加合理一些.总体来说,虽然设计理念不同,但为了保证向后兼容性,类库的使用方法与CI2.0的 ...

  2. [ ] 字符组(Character Classes) (转)

    []能够匹配所包含的一系列字符中的任意一个.需要注意的是,[]虽然能匹配其中的任意一个字符,但匹配的结果只能是一个字符,不是多个. 例如[abc]表示字符“a”或“b”或“c”. []支持用连字符“- ...

  3. 如何寻找google公司主导的开源项目

    在googlecode页面的搜索框中:搜索 label:google ,结果列表中就会显示所有开源软件列表.或者直接点击这个连接:http://code.google.com/hosting/sear ...

  4. Annotation(jdk5.0注解)复习(转自http://3w_cnblogs_com/pepcod/)

    package annotation.test; import java.lang.annotation.ElementType; import java.lang.annotation.Retent ...

  5. ecshop 分类树全部显示

    1.在page_header.lbi文件中加入 $GLOBALS['smarty']->assign('categories',get_categories_tree()); // 保证首页页面 ...

  6. 深入理解require/include的顺序

    在大型的Web项目中, include_path是一个模块化设计的根本中的根本(当然,现在也有很多基于autoload的设计, 这个不影响本文的探讨), 但是正是因为include_path, 经常会 ...

  7. Javaweb里面的filter,listener,servlet

    Filter 1Filter是什么:是过滤器简称 2Filter有什么作用:在filter中可以得到代表用户请求和响应的request.response对象,因此在编程中可以使用Decorator(装 ...

  8. redmine 2.5.2 安装后邮件无法发送

    找到redmine安装目录-apps->redmine->htdocs->conflg->configuration.yml email_delivery:    delive ...

  9. PubSub的一种实现

    今天在浏览JavaScript事件时,复习了下Dean Edward大神的addEvent.突然觉得可以基于他的思路实现一个结构更好的PubSub. 思路也很简单,就是要维护一个类似如下的一个仓库结构 ...

  10. AE+C# 向axPageLayoutControl1添加图例

    原文 AE+C# 向axPageLayoutControl1添加图例 //Get the GraphicsContainer IGraphicsContainer graphicsContainer ...