AngularJS标签页tab选项卡切换功能经典实例详解

前端之家收集整理的这篇文章主要介绍了AngularJS标签页tab选项卡切换功能经典实例详解前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

本文实例讲述了AngularJS实现标签页tab选项卡功能分享给大家供大家参考,具体如下:

选项卡一:

JavaScript+html+css

<Meta charset="utf-8"> www.jb51.cc js<a href="https://www.jb51.cc/tag/biaoqian/" target="_blank" class="keywords">标签</a>页tab切换
222
333
444

运行效果(直接在上测试运行):

选项卡二:

angularjs指令:

ng-class、ng-click、ng-if

<Meta charset="UTF-8"> www.jb51.cc AngularJS<a href="https://www.jb51.cc/tag/biaoqian/" target="_blank" class="keywords">标签</a>页tab切换

运行效果(直接在上测试运行):

选项卡三:

angularjs 指令:

ng-class、ng-click、ng-show

www.jb51.cc AngularJS标签页tab切换

运行效果(直接在上测试运行):

选项卡四:

angularjs 指令

第二种和第三种方式来源于下面代码的改进,产生的效果都是一样的。

www.jb51.cc AngularJS标签页tab切换

运行效果(直接在上测试运行):

但ng-show和ng-if是有区别的

第一点区别是,

ng-if 在后面表达式为 true 的时候才创建这个 dom 节点, ng-show 是初始时就创建了,用display:blockdisplay:none 来控制显示和不显示。

第二点区别是,

ng-if 会(隐式地)产生新作用域,ng-switchng-include 等会动态创建一块界面的也是如此。

这样会导致,在 ng-if 中用基本变量绑定 ng-model,并在外层 div 中把此 model 绑定给另一个显示区域,内层改变时,外层不会同步改变,因为此时已经是两个变量了。

猜你在找的JavaScript相关文章