今天，我们来学习一下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. 用IDEA在Tomcat上部署项目

    其实每次在需要运行的jsp页面右键=>run也是可以运行的,但是会出现下面这样 正常应该Run==>Edit Con-- 这时候将看到这个页面,千万不要在Defaults中招Tomcat配 ...

  2. Java获取键盘输入

    方法一:在控制台接收字符串并将其打印出来,使用BufferedReader和InputStreamReader类实现 import java.io.*; public class Demo { pub ...

  3. 基于 IJKPlayer-concat 协议的视频无缝拼接技术实现

    一.前言 Hi,大家好,我是承香墨影! 开门见山,开篇名义.今天来聊聊如何将多段视频,拼接成一个完整而连续的视频,然后无缝进行播放. 这样的需求应该不算偏门吧? 最简单的就是一些视频 App,会将大段 ...

  4. 根据 中序遍历 和 后序遍历构造树（Presentation）（C++）

    好不容易又到周五了,周末终于可以休息休息了.写这一篇随笔只是心血来潮,下午问了一位朋友PAT考的如何,顺便看一下他考的试题,里面有最后一道题,是关于给出中序遍历和后序遍历然后求一个层次遍历.等等,我找 ...

  5. codeforce round#466(div.2)C. Phone Numbers

    C. Phone Numbers time limit per test2 seconds memory limit per test256 megabytes inputstandard input ...

  6. 福州大学W班-助教总结

    开学初对自己的期望 在即将到来的学期前,我希望我可以做到以下几点: 1.多参与同学的课程设计,并提出自己的见解 2.不断提高个人的专业技能,活到老学到老 3.能够及时对同学的博客进行评论,并给出有用的 ...

  7. Beta 凡事预则立

    写在Beta冲刺前 关于组长是否重选的议题和结论 总体结论 组长无需更换 队内无人替代 理由 当前组长能够较好的号召和组织团队成员进行工作 当前组长能够对项目有合理的规划 当前组长被大家一致认可可以继 ...

  8. 项目Alpha冲刺Day10

    一.会议照片 二.项目进展 1.今日安排 解决前后台联调问题,完善全局的请求和路由跳转处理,添加空文件完善路由信息,优化界面跳转等待.完成个人信息和修改密码.修改前台数据组织和方法调用方式.解决登录和 ...

  9. Alpha冲刺Day2

    Alpha冲刺Day2 一:站立式会议 今日安排: 首先完善前一天的剩余安排工作量,其次我们把项目大体分为四个模块:数据管理员.企业人员.第三方机构.政府人员.数据管理员这一模块,数据管理员又可细分为 ...

  10. Flask 学习 六 大型程序结构

    pip freeze >requirement.txt 自动生成版本号 pip install -r requirement.txt 自动下载对应的库 梳理结构 config.py #!/usr ...