文档章节

Angular实践第一弹:选项卡

t
 thecatshidog
发布于 2016/06/25 21:30
字数 546
阅读 74
收藏 0

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

© 著作权归作者所有

t
粉丝 0
博文 1
码字总数 546
作品 0
合肥
私信 提问
加载中

评论(0)

Angular中sweetalert弹框的使用详解

最近太忙了,项目中使用的弹框老板嫌太丑,让我们优化一下,我在网上找了一下,找到了sweetalert弹框,算是比较好看的弹框了。所以我就想办法将sweetalert用到项目中,在项目中引入sweetaler...

半指温柔乐
2018/07/21
0
0
成为优秀Angular开发者所需要学习的19

一款to-do app基本等同于前端开发的“Hello world”。虽然涵盖了创建应用程序的CRUD方面,但它通常只涉及那些框架或库也能做到的皮毛而已。 Angular看起来似乎总是在改变和更新 - 但实际上,...

京东云技术新知
2019/07/02
71
0
7本学习AngularJS的免费电子书

电子书可以给我们一个有结构有组织的方式学习新的知识。学习 AngularJS也一样。现在最棒的事情莫过于电子书中提供大量实践练习,帮助我们理解各种方面。 让我们度下面7本书探究 AngularJS 吧...

咲晚杍
2015/01/28
416
0
Angular中ui-select的使用

Angular中ui-select的使用 最近工作一直很忙,没有时间整理知识,前几天项目中需要用到angular-ui-select,实现下拉框快速过滤效果,今天有时间研究了一下,终于搞明白了。 一、准备工作 1....

osc_sb0ev53k
2018/06/22
5
0
Angular 的 Material Design 风格框架 material2 6.3.2

Angular 的 Material Design 风格框架 material2 6.3.2 已发布。 本次更新内容主要是 Bug 修复,修复各种组件存在的一些问题。 源码下载和更新详情可查看 https://github.com/angular/mater...

局长
2018/07/05
2K
0

没有更多内容

加载失败,请刷新页面

加载更多

一言难尽,Jpa这个功能差点让我丢了工作

故事背景 前阵子,有位朋友在微信上问我数据被删了能不能恢复,我问了下原因,居然是因为一个配置项惹的祸。 故事细节 在 Spring Boot 中使用 jpa 来操作数据库,jpa 就不做详细的介绍了,相...

osc_axe50nd6
3分钟前
0
0
Link Cut Tree

//知识点 : LCT /*By:Luckyblock*/#include <cstdio>#include <ctype.h>#include <algorithm>#define ls (t[x].son[0])#define rs (t[x].son[1])const int kMaxn = 1e5 + 10;//===......

osc_q5urtsdm
5分钟前
11
0
【问题】Could not locate PropertySource and the fail fast property is set, failing

这是我遇到的问题 Could not locate PropertySource and the fail fast property is set, failing springcloud的其他服务读取不了配置中心得配置文件出错,原因是配置中心的一个配置文件有s...

osc_z9jr2tjo
6分钟前
5
0
Angular SPA基于Ocelot API网关与IdentityServer4的身份认证与授权(四)

在上一讲中,我们已经完成了一个完整的案例,在这个案例中,我们可以通过Angular单页面应用(SPA)进行登录,然后通过后端的Ocelot API网关整合IdentityServer4完成身份认证。在本讲中,我们...

osc_doeya1ck
7分钟前
11
0
[推荐]大量 Blazor 学习资源(一)

前言 / Introduction Blazor 是什么? Blazor 允许您使用 C# 而不是 JavaScript 构建交互式 Web UI。 Blazor 应用由使用 C#、HTML 和 CSS 实现的可重用 Web UI 组件组成。客户端和服务器代码...

osc_3r4js8qy
8分钟前
7
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部