angular实践第一弹：选项卡开发
在学习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实践第一弹：选项卡开发的更多相关文章
- 我的长大app开发教程第一弹：Fragment布局
在接下来的一段时间里我会发布一个相对连续的Android教程,这个教程会讲述我是如何从零开始开发“我的长大”这个Android应用. 在开始之前,我先来介绍一下“我的长大”:这是一个校园社交app,准 ...
- Hadoop基础-MapReduce的工作原理第一弹
Hadoop基础-MapReduce的工作原理第一弹 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 在本篇博客中,我们将深入学习Hadoop中的MapReduce工作机制,这些知识 ...
- Angular CDK Overlay 弹出覆盖物
为什么使用Overlay? Overlay中文翻译过来意思是覆盖物,它是Material Design components for Angular中针对弹出动态内容这一场景的封装,功能强大.使用方便 ...
- Spring Boot 第一弹，问候一下世界！！！
持续原创输出,点击上方蓝字关注我吧 目录 前言 什么是Spring Boot? 如何搭建一个Spring Boot项目? 第一个程序 Hello World 依赖解读 什么是配置文件? 什么是启动类? ...
- 关于『HTML5』第一弹
关于『HTML5』:第一弹 建议缩放90%食用 祝各位国庆节快乐!!1 经过了「过时的 HTML」.「正当时的 Markdown」的双重洗礼后,我下定决心,好好学习HTML5 这回不过时了吧(其实和 ...
- typecho流程原理和插件机制浅析（第一弹）
typecho流程原理和插件机制浅析(第一弹) 兜兜 393 2014年03月28日 发布 推荐 5 推荐 收藏 24 收藏,3.5k 浏览 虽然新版本0.9在多次跳票后终于发布了,在漫长的等待里始终 ...
- 初始——第一款个人开发上线app store
最初学习iOS开发时就听人建议,程序员应该有自己的博客,来记录每天的收获,于人于己都是一件很有意义的事.但当初作为菜鸟一枚,自认为对一些知识的认识尚浅,写博客这种高大上的事和自己八竿子打不着. 现如今 ...
- mui-顶部选项卡-第一个选项卡内容不显示
<div id="item1" class="mui-control-content mui-active"> <div id="s ...
- Java基础-程序流程控制第一弹（分支结构/选择结构）
Java基础-程序流程控制第一弹(分支结构/选择结构) 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.if语句 1>.if语句的第一种格式 if(条件表达式){ 语句体: ...
随机推荐
- aspose.word 在书签处插入符号
doc.Range.Bookmarks["CBJYQQDFS110"].Text = ""; Aspose.Words.DocumentBuilder buil ...
- AndroidManifest修改重打包全过程
AndroidManifest修改重打包全过程: 作者: 蔡建良 2013-06-26 准备工具:apktool.jar和signapk.jar 下载: http://download.csdn.ne ...
- js中判断是不是数字
使用isaNa来进行判断,这个函数的底层实现是:Nunmber,如果经过转化是数字则返回false,否则返回true Number('100px')返回的是ANA,parseInt('100px')返 ...
- 康乐不风流之爱解题的pde灌水王张祖锦
康乐不风流之爱解题的pde灌水王张祖锦 师弟: 邓洪存 (现在烟台大学任教) 好吧, 我一直想写写康乐园里与我相熟的这几个人, 不如趁此机会开始. 第一批人物为张祖锦.苏延辉.张会春.黄显涛.刘兴兴. ...
- UML系列图------用例图介绍
UML-Unified Model Language 统一建模语言,又称标准建模语言.是用来对软件密集系统进行可视化建模的一种语言. 在UML系统开发中有三个主要的模型: 功能模型: 从用户的角度展示 ...
- 查找指定目录下的文件 .xml
pre{ line-height:1; color:#9f1d66; background-color:#cfe4e4; font-size:16px;}.sysFunc{color:#5d57ff; ...
- 约瑟夫环 --- 面向对象 --- java代码
约瑟夫环 的 面向对象 解法 罗马人占领乔塔帕特后,39个犹太人与Josephus及他的朋友躲到一个洞中,39个犹太人决定宁愿死也不要被敌人抓到,于是决定了一个自杀方式,41个人排成一个圆圈,由第1个 ...
- Python的descriptor (2)
前面说了descriptor,这个东西其实和Java的setter,getter有点像.但这个descriptor和上文中我们开始提到的函数方法这些东西有什么关系呢? 所有的函数都可以是descrip ...
- （转）android中利用 ViewPage 实现滑动屏
最近实现了这样的一个效果:滑动界面出现拖拽效果,可翻动3屏,也可点击按钮翻动页面. 主要利用android.support.v4.view.ViewPager控件来实现. 第一个界面: 滑动屏幕: 换 ...
- TopFreeTheme精选免费模板【20130701.特别版】
今天我们整理了16款WordPress和Joomla的最新主题.它们都是来自Themeforest,RocketTheme,YooTheme以及TemPlaza的高质量主题,赶快收藏起来吧. Este ...