注意：事件、循环、赋值在一起就出错

错误实例：

<!DOCTYPE html>

<html ng-app="tab_switch">

  <head>

    <meta charset="utf-8">

    <title></title>

    <style media="screen">

    .box input {background:#CCC}

    .box input.active {background:yellow}

    .box div {width:200px;height:200px;background:#CCC;border:1px solid black;display:none}

    .box div.cur {display:block}

    </style>

    <script src="angular.js" charset="utf-8"></script>

    <script>

    let mod=angular.module('tab_switch', []);

    mod.controller('test', function ($scope){

      $scope.now=0;

      $scope.items={

        '按钮1': 'dfsdffgsdg',

        '按钮2': '45terggf',

        '按钮3': 'redr67567t'

      }

    });

    </script>

  </head>

  <body ng-controller="test">

    <div class="box">

      <input type="button" ng-repeat="(k,v) in items" value="{{k}}" class="{{$index==now?'active':''}}" ng-click="now=$index">

      <div ng-repeat="v in items" class="{{$index==now?'cur':''}}">{{v}}</div>

    </div>

  </body>

</html>

正确实例：

具体实现：

<!DOCTYPE html>

<html ng-app="test">

<head>

    <title>选项卡实例</title>

    <script src="js/angular.js" charset="utf-8"></script>

    <style type="text/css">

        .box button{

            background-color: #ccc;

        }

        .box button.active{

            background-color: pink;

        }

        .box div{

            width: 200px;

            height: 200px;

            background-color: #ccc;

            border:1px solid black;

            display: none;

        }

        .box div.cur{

            display: block;

        }

    </style>

    <script type="text/javascript">

    let mod = angular.module('test', []);

    mod.controller('main', function($scope) {

        $scope.now = 0;

        $scope.item = {

            '按钮1': '111111',

            '按钮2': '222222',

            '按钮3': '333333',

            '按钮4': '444444',

        };

        $scope.setNowFun=function(index){

            $scope.now=index;

        }

        // 事件、循环、赋值在一起就出错

    });

    </script>

</head>

<body ng-controller="main">

    <div class="box">

        <button ng-repeat="(k,v) in item" class="{{$index==now?'active':''}}" ng-click="setNowFun($index)">{{k}}</button>

        <div ng-repeat="v in item" class="{{$index==now?'cur':''}}">{{v}}</div>

    </div>

</body>

</html>

angularjs实现选项卡实例的更多相关文章

  1. 带你走近AngularJS - 体验指令实例

    带你走近AngularJS系列: 带你走近AngularJS - 基本功能介绍 带你走近AngularJS - 体验指令实例 带你走近AngularJS - 创建自定义指令 ------------- ...

  2. Android应用底部导航栏(选项卡)实例

    现在很多android的应用都采用底部导航栏的功能,这样可以使得用户在使用过程中随意切换不同的页面,现在我采用TabHost组件来自定义一个底部的导航栏的功能. 我们先看下该demo实例的框架图: 其 ...

  3. angularjs的resource实例对象

    angularjs的resource实例对象 我们看看都有啥 而直接使用service对象的时候没有前面这些$

  4. 原生js使用面向对象的方法开发选项卡实例教程

    本教程通过js面向对象的方法来封装一个选项卡的实例,在实例中讲解js的面向对象如何实现功能. 一般封装好的选项卡程序,只需要一个div元素即可.其它元素都是通过json数据来生成,所以封装好的选项卡实 ...

  5. 30.angularJS第一个实例

    转自:https://www.cnblogs.com/best/tag/Angular/ AngularJS 通过 ng-directives 扩展了 HTML. ng-app 指令定义一个 Angu ...

  6. angularjs使用ng-messages-include实例

    <!DOCTYPE html> <html lang="zh-CN" ng-app="app"> <head> <me ...

  7. tab选项卡实例

    之前也见了不少的tab选项卡,但是下面这个选项卡是一个页面中有多个时互不影响的. <head> <meta charset="utf-8"> <met ...

  8. AngularJS常用Directives实例

    在第一篇 认识AngularJS 中,我们已经基本了解了AngularJS,对Directive也有了一定了解,本章我们将继续介绍Directive,对其有一个更深入的了解和掌握. 常用的Direct ...

  9. 【转】Android应用底部导航栏(选项卡)实例

    现在很多android的应用都采用底部导航栏的功能,这样可以使得用户在使用过程中随意切换不同的页面,现在我采用TabHost组件来自定义一个底部的导航栏的功能. 我们先看下该demo实例的框架图: 其 ...

随机推荐

  1. log4net 日志配置及使用

    一.log4net按照不同的[LEVEL]级别输出到不同文件 <log4net> <!--错误日志:::记录错误日志--> <!--按日期分割日志文件 一天一个--> ...

  2. 强大！HTML5 3D美女图片旋转实现教程

    又到周末,来弄点HTML5的特效玩玩,今天要折腾的是HTML5 3D图片特效,图片在垂直方向上被分割成一条条小矩形,在图片上拖动鼠标即可让每一个小矩形旋转,从而让图片形成3D立体的效果,来看看效果图: ...

  3. 3d md5 demo

    描述:场景3dmax做的,随便拖的几个东西 模型玩过游戏的都知道是doom3的怪兽猪脚 音频是openal播放的wav文件 下载地址:http://pan.baidu.com/s/1eQ8SYI2

  4. keep-alive pipeline区别

    在http1.1中,引入了一种新的特性,即pipeline.那么什么是pipeline呢?pipeline其实就是流水线作业,它可以看作为keepalive的一种升华,因为pipeline也是基于长连 ...

  5. Java无参构造方法

    一定要保留无参构造方法.---------->反射是最重要的操作原理,大量地应用了反射处理机制. 如Struts.Spring框架等.

  6. textarea标签内容为（英文或数字不自动换行）的解决方法

    textarea 显示一串英文时不会发生换行. 以下是两种解决方法:1.限制textarea的大小 width 设置为 00px (不要设置为00%)cols  设置为 30+ (也有类似效果) 2. ...

  7. Mac OS终端中设置颜色高亮和自动补全

    已测试通过,原文:http://blog.csdn.net/songjinshi/article/details/8945809 一.颜色高亮显示 针对terminal采用bash模式: 编辑 ~/. ...

  8. Oracle高级查询之CONNECT BY

    为了方便大家学习和测试,所有的例子都是在Oracle自带用户Scott下建立的. Oracle中的select语句可以用start with ... connect by prior ...子句实现递 ...

  9. 2015-10-07：几乎100%肯定：百度网盘在夜间的时段是不限速的：早晨7点前很轻松达到3M/S，7点后就降低到1M/S了，白天才400K/S左右

    最近发现(2015-10-07)几乎100%肯定:百度网盘在夜间的时段是不限速的:早晨7点前很轻松达到3M/S,7点后就降低到1M/S了,白天才400K/S左右

  10. 跨域、跨服务器调用时候session丢失的问题

    最近新进一个公司,做的项目是手机支付系统.由于涉及到金钱相关的,所以安全性要求特别的高.项目分了很多个子系统,在部署(测试)的时候是每个Tomcat上面只放一个子系统.比如现在有5个子系统,那么就会对 ...