文档章节

Angular实践第一弹:选项卡

t
 thecatshidog
发布于 2016/06/25 21:30
字数 546
阅读 8
收藏 0
点赞 0
评论 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
合肥
Angular 的 Material Design 风格框架 - Angular Material

Material Design for Angular 是 Angular 官方团队开发的基于最新版本 Angular 的 Material Design 风格的框架,可和 Nest.js 搭配使用做全栈开发。 针对 Angular 1 版本的实现 https://www....

匿名 ⋅ 05/15 ⋅ 0

Angular 6.0正式版发布,都有哪些新功能

点击关注异步图书,置顶公众号 每天与你分享IT好书 技术干货 职场知识 在Angular 5发布半年之后,Angular 6在昨天正式发布,那么在这个版本有哪些新功能呢?新版本重点关注工具链以及工具链在...

异步社区 ⋅ 05/08 ⋅ 0

【前端】—聊聊我认识的Angular

前言 最近接触的项目前端用到了Angular框架,之前略有耳闻,从vue换到Angular,感觉东西差不多,还是要系统学习的,先来了解下。 正文 1、Angular 的发展 AngularJS 是一款来自Google的前端J...

zt15732625878 ⋅ 05/19 ⋅ 0

Angular 6正式版发布,都有哪些新功能

在Angular 5发布半年之后,Angular 6在昨天正式发布,那么在这个版本有哪些新功能呢?新版本重点关注工具链以及工具链在 Angular 中的运行速度问题。除此之外,这次更新还包括框架包(@angu...

code_xzh ⋅ 05/05 ⋅ 0

初学angular 看到网上有angular js 也有angular2 ,到angular官网发现最近版本是6了,那么现在大家说的angular js到底是什么啊?

初学angular 看到网上有angular js 也有angular2 ,到angular官网发现最近版本是6了,那么现在大家说的angular js到底是什么啊? angular2和现在官网的angular6 就是 angular js 只是版本不同...

Jordan裔 ⋅ 05/19 ⋅ 0

再谈angularJS数据绑定机制及背后原理—angularJS常见问题总结

Angular 的数据绑定采用什么机制,详述原理? 脏检查机制。阐释脏检查机制,必须先了解如下问题。 单向绑定(ng-bind) 和 双向绑定(ng-model) 的区别? ng-bind 单向数据绑定($scope ->...

634117608 ⋅ 04/19 ⋅ 0

[Angular Material完全攻略] Day 01 - 开始 & 简介

转载 从Angular第2版正式release后,根据全球最大工程师讨论区StackOverflow的统计,从2016开始的Angular讨论度就不断窜升,甚至超越了React,直到了2017年,甚至摆脱了前一代Angularjs的阴影...

readilen ⋅ 05/21 ⋅ 0

Angular 6.0 即将发布,承诺更小更快更易用

本月早些时候,Angular 团队发布了 6.0 的第五版候选版本,其中包括一些错误修复以及添加令牌标记和支持配置导航网址。 根据 Angular 的开发者支持者 Stephen Fluin 的说法,RC 意味着团队已...

达尔文 ⋅ 04/24 ⋅ 0

Angular 6 正式发布:统一框架、Material 和 CLI 三大模块

Angular 6.0.0 已正式发布,新版本重点关注工具链以及工具链在 Angular 中的运行速度问题。Angular v6 是统一整体框架、Material 和 CLI 三大 Angular 组件的第一个版本,此次没有将重点放在...

雨田桑 ⋅ 05/04 ⋅ 30

【Angular】之Angular环境搭建

前言 小编最近在学习angular的内容,万事开头难,完成了开头也便成功了一半。这句话小编在这次的学习实践之旅中,深有体会,下面小编就来讲一讲,angular环境搭建之旅吧! 一、环境搭建 1.下...

m18633778874 ⋅ 05/08 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Java NIO之字符集

1 字符集和编解码的概念 首先,解释一下什么是字符集。顾名思义,就是字符的集合。它的初衷是把现实世界的符号映射为计算机可以理解的字节。比如我创造一个字符集,叫做sex字符集,就包含两个...

士别三日 ⋅ 35分钟前 ⋅ 0

Spring Bean基础

1、Bean之间引用 <!--如果Bean配置在同一个XML文件中,使用local引用--><ref bean="someBean"/><!--如果Bean配置在不同的XML文件中,使用ref引用--><ref local="someBean"/> 其实两种......

霍淇滨 ⋅ 41分钟前 ⋅ 0

05、基于Consul+Upsync+Nginx实现动态负载均衡

1、Consul环境搭建 下载consul_0.7.5_linux_amd64.zip到/usr/local/src目录 cd /usr/local/srcwget https://releases.hashicorp.com/consul/0.7.5/consul_0.7.5_linux_amd64.zip 解压consu......

北岩 ⋅ 44分钟前 ⋅ 0

Webpack 4 api 了解与使用

webpack 最近升级到了 v4.5+版 01 官方不再支持 node4 以下版本 官方不再支持 node4 以下版本官方不再支持 node4 以下的版本,所以如果你的node版本太低,先开始升级node吧!话说node10 ...

NDweb ⋅ 53分钟前 ⋅ 0

使用nodeJs安装Vue-cli

Vue脚手架就是一个Vue框架开发环境 脚手架的意思是帮你快速开始一个vue的项目,也就是给你一套vue的结构,包含基础的依赖库,只需要 npm install就可以安装,让我们不需要为了编辑或者一些其...

木筏笔歆 ⋅ 今天 ⋅ 0

【微信小程序开发实战】0x00.开发前准备工作

写在开始 本人资深后端码农一枚,近期项目需求,接触到了微信小程序,将学习过程整理成文分享给小伙伴们,由于是边学边整理难免有表述不对的地方,望大家及时指正,感谢。 本人微信号: dream...

dreamans ⋅ 今天 ⋅ 0

linux redis的安装和php7下安装redis扩展

安装redis服务器 (1)下载安装包: $ wget http://download.redis.io/releases/redis-2.8.17.tar.gz (2)编译程序: $ tar xzf redis-2.8.17.tar.gz $ cd redis-2.8.17 $ make $ cd src &&......

concat ⋅ 今天 ⋅ 0

Guava EventBus源码解析

一、EventBus使用场景示例 Guava EventBus是事件发布/订阅框架,采用观察者模式,通过解耦发布者和订阅者简化事件(消息)的传递。这有点像简化版的MQ,除去了Broker,由EventBus托管了订阅&...

SaintTinyBoy ⋅ 今天 ⋅ 0

http怎么做自动跳转https

Apache 版本 如果需要整站跳转,则在网站的配置文件的<Directory>标签内,键入以下内容: RewriteEngine on RewriteCond %{SERVER_PORT} !^443$ RewriteRule ^(.*)?$ https://%{SERVER_NAME......

Helios51 ⋅ 今天 ⋅ 0

Python爬虫,抓取淘宝商品评论内容

作为一个资深吃货,网购各种零食是很频繁的,但是能否在浩瀚的商品库中找到合适的东西,就只能参考评论了!今天给大家分享用python做个抓取淘宝商品评论的小爬虫! 思路 我们就拿“德州扒鸡”...

python玩家 ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部