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

错误实例：

<!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. mysql错误代码对照表较完整 mysql_errno()

    From: http://blog.csdn.net/aidenliu/article/details/5925604 mysql错误代码对照表较完整  0101 属于其他进程的专用标志. 0102 ...

  2. JSTL时间格式化项目小试

    我在之前的博客中虽然详尽的介绍了JSTL在各个载体中的用法,也介绍了它和EL的共同使用的好处,但是只是顺便提了一下JSTL的格式化. 今天在项目中遇到了一个小问题,也就想到这,马上就开始实践了一下,效 ...

  3. 获取 SharpSvn 执行 svn 操作的实时日志

    1 获取 SharpSvn 操作日志的方式 之前一篇随笔(使用 SharpSvn 执行 svn 操作)讲到可以通过声称一个绑定到一个 SvnClient 对象的 SvnClientReport 对象. ...

  4. 性能监控-TP理解

    首先给出Google到的答案: The tp90 is a minimum time under which 90% of requests have been served. tp90 = top ...

  5. 【乐呵一下】WINDOWS有个非常低级的错误！

    该错误来自微软windows附带的计算器(开始附件计算器). 1. 当你尝试用9216除以96并按下=按钮时,计算器竟然没有反应!!! 而9216除以97,98却正常. 2. 还有一个错误,当你尝试用 ...

  6. [原]unity3d之http多线程异步资源下载

    郑重声明:转载请注明出处 U_探索 本文诞生于乐元素面试过程,被面试官问到AssetBundle多线程异步下载时,愣了半天,同样也被深深的鄙视一回(做了3年多u3d 这个都没用过),所以发誓要实现出来 ...

  7. 给一个由n-1个整数组成的未排序的序列，其元素都是1~n中的不同的整数。如何在线性时间复杂度内寻找序列中缺失的整数

    思路分析:尼玛这不就是等差数列么.首先将该n-1个整数相加,得到sum,然后用(1+n)n/2减去sum,得到的差即为缺失的整数.因为1~n一共n个数,n个数的和为(1+n)n/2,而未排序数列的和为 ...

  8. hibernate4.3 无法获取数据库最新值

    在用ssh框架的时候遇到一个问题(hibernate版本号4.3) 问题描写叙述:web端和应用程序都能够读写数据库.当应用程序改动数据库后.hibernate无法读取最新值,读出来的一直都是旧数据. ...

  9. Dubbo -- 系统学习 笔记 -- 示例 -- 集群容错

    Dubbo -- 系统学习 笔记 -- 目录 示例 想完整的运行起来,请参见:快速启动,这里只列出各种场景的配置方式 集群容错 在集群调用失败时,Dubbo提供了多种容错方案,缺省为failover重 ...

  10. 在SSH框架中，如何得到POST请求的URL和参数列表

    在做项目的API通知接口的时候,发现在SSH框架中无法获取到对方服务器发来的异步通知信息.最后排查到的原因可能是struts2对HttpServletRequest进行了二次处理,那么该如何拿到pos ...