AngularJs选项卡的不同写法

2021-07-08 18:05

阅读：368

YPE html>

标签：控制 meta ng-class tle title oat font charset 简单

　　AngularJs选项卡的写法有很多，每个人都会有自己的一个写法，今天我来给大家展示两种不同写法的AngularJs选项卡！

　　方法一：

　　1.创建选项卡，我是在控制器里创建数组将其渲染在页面上：

"en">
    "UTF-8">
    选项卡1"mk">
"test">
    "ul">
        "item in arr">{{item.name}}

　　2.创建选项卡相对应的数据，并将它们放在一个数组里，先让第一个内容展现出来。


"en">
    "UTF-8">
    选项卡1"mk">
"test">
    "ul">
        "item in arr" ng-click="dj($index)">{{item.name}}
    

        
{{item.name}}

3.接下来实现点击效果，点击选项卡显示相对应的数据。

html:

1 //在选项卡上添加一个点击事件
2

"item in arr" ng-click="dj($index)">{{item.name}}

js:

1 //            在控制器里添加点击事件
2             $scope.dj=function(index){
3                 $scope.str=$scope.strs[index];4             }

好了点加效果实现了，等等，还没有添加样式；

4.当点击选项卡时，给其加个红色背景，先给第一个按钮添加一个红色背景。

html:

1 // 添加一个class类名 on
2

"item in arr" ng-click="dj($index)" ng-class="{on:item.ischecked}">{{item.name}}

js:

 1// 想给第一个选项卡添加class类名 on    
 2  　　　　　　$scope.arr[0].ischecked=true;
 3 //            在控制器里添加点击事件
 4             $scope.dj=function(index){
 5                 $scope.str=$scope.strs[index];
 6 //                循环遍历选项卡，先让所有选项卡为初始样式，点击某个让其添加class类名 on
 7                 angular.forEach($scope.arr,function(value,key){
 8                     value.ischecked=false;
 9                 });
10                 $scope.arr[index].ischecked=true;
11             }

现在我把他们整体串联一下：

 1 
 2 
 3 "en">
 4     "UTF-8">
 5     选项卡1 6     29     30     67 
68 "mk">
69 "test">
70     "ul">
71         "item in arr" ng-click="dj($index)" ng-class="{on:item.ischecked}">{{item.name}}
72     
73     "nr">
74         
75             "item in str">{{item.name}}
76         
77     
78 
79 
80

　　方法二：

　　1.创建选项卡，同方法一的第一点大致相同也是在控制器里创建数组将其渲染在页面上：


"en">
    "UTF-8">
    选项卡2"mk"ng-controller="test">

"item in arr">"{{item.href}}">{{item.name}}

　　2.在script中创建选项卡相对应的数据与其链接相对应，实现点击效果；

html:

"item in arr" ng-click="dj($index)">"{{item.href}}">{{item.name}}

　　　//　展示内容部分

js:

　　3.还是添加class类名与上一方法的相同

js:

//            在控制器里添加
            $scope.arr[0].ischecked=true;
            $scope.dj=function(index){
                angular.forEach($scope.arr,function(value,key){
                    value.ischecked=false;
                });
                $scope.arr[index].ischecked=true;
            }

方法二的完整代码：

"mk">
"en">
    "UTF-8">
    选项卡1"test">

"item in arr" ng-click="dj($index)" ng-class="{on:item.ischecked}">"{{item.href}}">{{item.name}}

我感觉第二种方法要更简单点，你们怎么看。

AngularJs选项卡的不同写法

标签：控制 meta ng-class tle title oat font charset 简单

原文地址：http://www.cnblogs.com/yhyanjin/p/7096610.html

上一篇：struts中实现ajax的配置信息

下一篇：AngularJS实现数据列表的增加、删除和上移下移等功能实例

文章来自：搜素材网的编程语言模块，转载请注明文章出处。
文章标题：AngularJs选项卡的不同写法
文章链接：http://soscw.com/index.php/essay/102435.html

亲，登录后才可以留言！

AngularJs选项卡的不同写法

评论

热门文章

推荐文章

最新文章

置顶文章