Angularjs实现mvvm式的选项卡示例代码

在实现Angularjs实现mvvm式的选项卡之前，先搬出我们常用的jquery实现。

1、jquery实现简单粗暴的选项卡效果

var nav=$(' .制表符');//选项卡切换var box=$(' .方框');//容器nav.on('click '，function(){ //点击事件var this_index=$(this).index()；$(这个)。addClass('active ').兄弟姐妹()。移除CLaSS(' active ')；box.eq(this_index).显示()。兄弟姐妹()。hide()；});在这里只给出射流研究…核心部分，html和钢性铸铁不做赘述。

以上代码，简单粗暴的实现了选项卡效果，用点击事件获得elem.index()，把索引和容器串起来控制显示隐藏。

2、angularjs实现一个简单选项卡效果

超文本标记语言部分

节ng-app=' myApp ' div class=' tab tab s-style ' ng-controller=' tab controller as tab ' nav ul Li ng-class=' { ' current ' : tab。isset(1)} ' a href=' # ' ng-click='选项卡。设置当前(1)' span home/span/a/Li Li ng-class=' { ' current ' :选项卡。isset(2)} ' a href=' # ' ng-click='选项卡。设置当前(2)“工作”部分（这里为了方便我们使用较少的语法，童鞋们可以自定义钢性铸铁实现个性效果)

* { margin : 0；padd : 0；}车身{ background : # E7 eceafont-weight : 600；font-family: 'Raleway '，Arial，无衬线；文本对齐：中心；} a { color: # 2CC185文本装饰：无；大纲：无；hover { color: # 74777b}}。选项卡{位置：相对；宽度： 100%;margin : 30px auto 0 autonav { ul { position :相对位置；显示： flex最大宽度： 1200像素；边距： 0自动列表-样式：无；flex-flow:行包装；正义-内容：中心；Li { flex : 1；当前a { color: # 74777b} } } }一个{显示：块；相对位置：溢出：隐藏；线高： 2.5;跨度{垂直对齐： 中间；font-size : 1.5 em} }}.内容{位置：相对；第{ /*节显示：无；*/margin : 0 auto；最大宽度： 1200像素；内容-当前{ /* display:块；*/} p { color: rgba(40，44，42，0.4)；保证金： 0；padd : 1.75 em 0；字体粗细： 900；font-size : 5em线高： 1;} }}.tab风格{ nav {/* background : rgba(255，255，255，0.4)；*/ul li { a { overflow:可见；边框-底部： 1px实心rgba(0，0，0，0.2)；-网络套件-transit :颜色0.2转换：颜色0.2s} } ul li.current a{ :after， after { content : }；绝对位置：前：名100%；左侧： 50%;宽度： 0;高度： 0;border:固体透明；{ margin-left :-10px }后为：边框宽度： 10px边框-顶色： # E7 ecea} :先于{左边距-:-11px；边框宽度： 11pxborder-top-color: rgba(0，0，0，0.2)；} } }}js部分

angular.module('myApp '，[]).controller('TabController '，function(){ this。电流=1；这个。设置current=function(tab){ this。current=tab};这个。isset=function(tab){ return this。current==tab};});最后效果如下图所示：

通过以上代码，我们可以发现实现的核心是angularjs内置的尼日利亚级和点击，显示指令。

通俗来讲：控制器里定义了目前的这条数据默认值为1、双击给点击事件自定义函数，改变目前的数据尼日利亚级通过获得目前的的值绑定条件，给当前选中的索引添加目前的样式，容器同样获得控制器里的目前的数据通过尼日利亚显示控制显示隐藏。

3、angularjs实现一个稍微复杂的移动端选项卡效果

超文本标记语言部分

脚本src=' http :http://cdn。bootcss。com/angular。js/1。3 .8/棱角分明。量滴js '/script script src=' http :3358 cdn。bootcss。com/angular。js/1。3 .8/角度触摸。量滴js '/script//angular js的一个移动端触控事件库div ng-app=' myApp ' ng-controller=' my controller ' div class=' type-Tab ' div ng-repeat=' item in[1，2，3，4]' ng-click=' change index($ index)' Tab { { item } }/div/div class=' guid-bar ' div class=' guid-bar-content ' style=' left : { { 25 * active index } } % '/div/div class=' Tab-content ' ng-sweep-right=' swi peri部分

* { padd :0 margin :0 font-family : ' Arial '；}.type-tab {宽度： 100%；高度： 40px}.type-tab div { float : left；宽度： 25%;线高： 40px文本对齐：中心；光标：指针指针；用户选择：无；-网络工具包-用户-选择：无；}.guid-bar{位置：相对；页边距-top :-3px；}.guid-bar-内容{宽度：25%；高度： 3px背景色： # 345;绝对位置：左侧： 50%;过渡：所有400毫秒的缓解；}.选项卡内容{宽度： 100%；高度： 500像素；背景色： # CCC飞越：隐藏；}.选项卡-内容-内部{宽度： 400%;相对位置：过渡：所有400毫秒；}.选项卡-内容-项目{宽度：25%；向左浮动：文本对齐：居中；}js部分

var myApp=angular.module('myApp '，[' ngTouch '])；myApp.controller('myController '，函数($ scope){ $ scope。活动索引=0；$ scope.changeIndex=函数（索引){ $ scope . activeindex=index }；$ scope。swipeleft=function(){ $ scope。activeindex=$ scope。activeindex$ scope。check()；};$ scope。swiperight=function(){ $ scope。activeindex=-$作用域。activeindex$ scope。check()；};$ scope。check=function(){ if($ scope。activeindex 3)$作用域。active index=0；if($ scope。activeindex 0)$作用域。active index=3；}})效果如下：

好了，今天我们就给出这两个例子，对angularjs了解过的童鞋，直接看代码应该可以很快看懂。没了解过的童鞋，也能通过这两个例子，了解到mvvm的黑魔法，以及它的代码组织结构。

4、angularjs的mvvm模式比jquery的数字正射影像图操作好在哪里？

1、从宏观上来说，一种是操作数据处理数据，一种是操作数字正射影像图和用户界面交互。

一般网页项目的流程可以总结为三个流程：1) 你要获取界面上的数据2)后台交换数据3)获取数据后，对界面重新进行渲染。这个过程中，你和后台数据交换怎么实现？jquery的创建交互式、快速动态网页应用的网页开发技术吧，如果数据交换的应用程序接口假设20多个，那么$.得到或者$.创建交互式、快速动态网页应用的网页开发技术你要写多少个才能全部包含进去？而且所有应用程序接口链接都不在一个地方，管理起来相当麻烦。而angularjs只要配置一下途径就行了。获取了数据后，你又如何管理这些数据，如何把数据渲染到界面上去？

如何管理各种事件？jquery本身的特点，也就是事件触发，是你在写触发事件的过程——处理数据。显然，功能越多，代码就会像面条一样纠缠在一起。传统jquery前端两三年不缺。事件委托、dom操作、浏览器渲染过程、插件组件封装等。没有深入研究过，所以可以想象代码质量有多差。事实上，jquery是一个类库，而不是开发框架。jq是js原生api的进一步封装，让你享受dom操作、动画操作和ajax。正是因为它太灵活，所以更容易编写难以维护的代码。

2.性能：DOM操作比较慢，DOM对象本身也是一个js对象，所以严格来说操作这个对象并不慢，但是会触发一些浏览器行为，比如布局、绘制。

摘要

随着web产品复杂性的不断增加，分层架构必不可少，因此双向绑定作为解药，结合长期流行的MVC框架，衍生出MVVM这个神器。博主坚信mvvm将是最终的前端解决方案。从DOM操作到数据操作的适应需要一个过程，但只要结果好，这些努力都是值得的。在这个过程中，也是你专业能力的提升。来吧，朋友们！