在学习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. RNN 与 LSTM 的应用

    之前已经介绍过关于 Recurrent Neural Nnetwork 与 Long Short-Trem Memory 的网络结构与参数求解算法( 递归神经网络(Recurrent Neural N ...

  2. TCP握手

    1.TCP的三次握手四次挥手 第一次握手:Client将标志位SYN置为1,随机产生一个值seq=J,并将该数据包发送给Server,Client进入SYN_SENT状态,等待Server确认. 第二 ...

  3. Java中sychronized方法与sychronized块区别

    一.举几个栗子

  4. mips-linux-gnu-gcc

    (1) -lz -lrt -lm -lc都是什么库 libzlibrtlibmlibc然后google之压缩库(Z)实时库(real time)数学库(math)标准C库(C lib) 可以进入/li ...

  5. Karel运行环境配置

    1.下载 见http://wenku.baidu.com/view/24762ced998fcc22bcd10d5e.html 2.界面空白问题 问题:运行Karel后,发现整个界面空白一片,没有任何 ...

  6. SQL Server数据类型与SDE库表sde_type对照表

    SDE_column_registry 表管理所有注册列. 警告:如果使用 SQL 界面更改列定义,SDE_column_registry 表中的记录将不会更新.这可能导致之后的任何数据导出失败. S ...

  7. iOS 复选框风格转换 Switchery 开关效果

    Switchery 是个简单的 JavaScript 组件,只要几个简单的步骤就可以帮助用户把默认的 HTML 复选框转换成漂亮 iOS 7 样式风格.用户可以很方便的自定义这种转换,所以可以很好的配 ...

  8. winform 下log4net简单应用示例及“缺少log4net引用”的处理方案

    1.添加应用log4net.dll 2.新增log4net.config文件,文件内容如下 <?xml version="1.0" encoding="utf-8& ...

  9. LoadRunner--内存指标介绍

    Threads——线程数当前全部线程数============================================ Available MBytes——物理内存的可用数指计算机上可用于运行 ...

  10. 性能测试之系统监控工具nmon

    一.概述 本篇文章主要讲解nmon,以下为目录 1.nmon介绍 2.nmon下载.安装及使用 3.nmon analysis 分析及使用,各个项的含义 二.详细信息: 1.nmon介绍: nmon( ...