今天，我们来学习一下angular中怎么使用指令来实现两个选项卡的问题。

首先，要先引入jQuery文件与angularjs文件。

<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*定义选中按钮样式*/
        .on {
            background: red;
        }
        /*对内容进行布局*/
        p {
            border: #000 1px solid;
            width: 200px;
            display: none;
            height: 200px;
        }
    </style>
    <script src="jquery-3.1.1.js"></script>
    <script src="angular.min.js"></script>
    <script>
        var app=angular.module("app",[]);//定义angular模块
        app.controller("ctrl",function ($scope) {
            $scope.list=[
                {"name":"新闻","content":"新闻"},
                {"name":"体育","content":"体育"},
                {"name":"娱乐","content":"娱乐"}
                ];
            $scope.list2=[
                {"name":"新闻2","content":"新闻2"},
                {"name":"体育2","content":"体育2"},
                {"name":"娱乐2","content":"娱乐2"},
                {"name":"农业","content":"农业"}
            ]
        });
        app.directive("myTab",function () { //定义名字时要使用驼峰式命名法
            return{
                link:function (scope,element,attr) {//使用jQuery来实现效果
                    element.delegate("input","click",function () {
                        $(this).attr("class","on").siblings("input").attr("class","");
                        $(this).siblings("p").eq($(this).index()).show().siblings("p").hide();
                    })
                },
                restrict:"ECMA",
                replace:true,
//                scope:true,//解决冲突问题
                scope:{
                    myId:"@",  //绑定字符串
                    myData:"=" //绑定变量
                }
                templateUrl:"tab.html"
            }
        })
    </script>
</head>
<body ng-controller="ctrl">
    <my-tab my-id="div1" my-data="list"></my-tab>
    <my-tab my-id="div2" my-data="list2"></my-tab>
</body>
</html>

tab.html部分
<div id="{{myId}}">
    <input ng-repeat="data in myData" type="button" value="{{data.title}}" ng-class="{on:$first}">
    <p ng-repeat="data in myData" ng-style="{display: $first ?  'block' : 'none'}">{{data.content}}</p>
</div>
这样小小的两个选项卡效果就完成了，你们学会了吗？你们也可以使用自定义指令的方式写拖拽。

anguar使用指令写选项卡的更多相关文章

  1. jq方法写选项卡的基本原理以及三种方法

    使用jq写选项卡,告别了繁琐的循环以及命名规范 基本原理: 1.当某一个btn被选中时,将这个btn的背景颜色设为橘色,其余兄弟btn背景颜色设为空(none) 2.如果子div与btn的索引相同,就 ...

  2. JavaScript写选项卡

    方法一: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...

  3. jQuery写选项卡

    <!DOCTYPE html> <htmllang="en"> <head> <metacharset="UTF-8" ...

  4. vue中指令写了一个demo

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. AngularJs 指令实现选项卡

    HTML: <body ng-controller="Aaa"> <my-tab my-id="div1" my-data="dat ...

  6. angularJs指令深度分析

    AngularJs的指令定义大致如下 angular.module("app",[]).directive("directiveName",function() ...

  7. angularjs指令(二)

    最近学习了下angularjs指令的相关知识,也参考了前人的一些文章,在此总结下. 欢迎批评指出错误的地方.   Angularjs指令定义的API AngularJs的指令定义大致如下 angula ...

  8. 你知道用AngularJs怎么定义指令吗？

    前言 最近学习了下angularjs指令的相关知识,也参考了前人的一些文章,在此总结下. 欢迎批评指出错误的地方.   Angularjs指令定义的API AngularJs的指令定义大致如下 ang ...

  9. 学习AngularJs:Directive指令用法（完整版）

    这篇文章主要学习AngularJs:Directive指令用法,内容很全面,感兴趣的小伙伴们可以参考一下   本教程使用AngularJs版本:1.5.3 AngularJs GitHub: http ...

随机推荐

  1. @Controller 类中初始化问题解决办法

    在Controller类中常常遇到有些参数需要初始化,甚至有些只允许初始化一次,而Controller类不像servelet类可以调用init()函数进行初始化,这里想到的办法是设置标记值,让初始化部 ...

  2. delphi XE Datasnap SERVER 在windows 7 下为服务添加描述信息

    网上对服务添加描述信息的,多数是用注册表的方式,而注册表的方式,我在win7 下测试,不知为什么,总是不行,把执行的CMD以管理员模式开启,还是没加进去. 于是在网上查到下面的代码,保存供叁考,原文博 ...

  3. java容器类4：Queue深入解读

    Collection的其它两大分支:List和Set在前面已近分析过,这篇来分析一下Queue的底层实现. 前三篇关于Java容器类的文章: java容器类1:Collection,List,Arra ...

  4. javap -c命令关键字的含义

    jdk提供了javap命令用于查看字节码来查看程序执行赋值的顺序,看懂这些关键字可以很好的理解程序执行的过程 转自:http://www.cnblogs.com/duanxz/archive/2014 ...

  5. Kafka OffsetMonitor：监控消费者和延迟的队列

    一个小应用程序来监视kafka消费者的进度和它们的延迟的队列. KafkaOffsetMonitor是用来实时监控Kafka集群中的consumer以及在队列中的位置(偏移量). 你可以查看当前的消费 ...

  6. 【Python】 xml转json

    虽然python有解析xml的模块,也有生成json的模块,但是没有把这两者连接起来的模块. 下面是以来自MIT的大神Martin Blech写的一个方便的模块,供大家参考.也别忘了在用之前先拜谢作者 ...

  7. C语言描述队列的实现及操作（链表实现）

    // 队列的单链表实现 // 头节点:哨兵作用,不存放数据,用来初始化队列时使队头队尾指向的地方 // 首节点:头节点后第一个节点,存放数据 #include<stdio.h> #incl ...

  8. 笔试常考--浏览器兼容性问题及解决方案（CSS）

    问题一:不同浏览器的标签默认的外补丁和内补丁不同 问题现象:随便写几个标签,不加样式控制的情况下,各自的margin 和padding差异较大. 解决方案:css里加: ;;} 备注:这个是最常见的也 ...

  9. 结合jenkins在Linux服务器搭建测试环境

    何时使用: 测试过程中我们需要持续构建一个软件项目,为避免重复的手动下载.解压操作,我们需要搭建一个能够自动构建的测试环境,当代码有更新时,测试人员只需点一下[构建]即可拉取最新的代码进行测试(也可设 ...

  10. 团队作业7——第二次项目冲刺（Beta版本12.08）

    项目每个成员的进展.存在问题.接下来两天的安排. 已完成的内容:完成了排行榜的测试.上传头像功能的原型设计.界面优化 计划完成的内容:上传头像功能开发.测试.头像裁剪原型设计 每个人的工作 (有wor ...