今天，我们来学习一下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. SVN报E155024: Invalid relocation destination

    大家开发过程会遇到一个场景! 我们在使用SVN版本管理工具进行开发的过程中,前一个版本在Branch->201803 分支开发完成之后,后一版本要求在Branch->201804版本开发 ...

  2. python基础学习笔记二之列表

    1.列表 ①列表的创建: ②列表的查询(索引): ③列表的切片操作: 此处要注意到:返回索引0到3的元素,顾头不顾尾. ④列表的增加: s.append()  #直接在结尾追加 s.insert()  ...

  3. 【Python】 字符串的相关小知识点

    字符串 很久以前,刚接触IT知识的时候,我觉得字符串还有字符变量是很奇葩的存在.数字,数组,字典什么的这些数据类型要不就是自然界固有的要不就是为了计算方便而发明出来的一些数据的组合方式.但是字符串这玩 ...

  4. pat 喊山

    L3-008. 喊山 时间限制 150 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 陈越 喊山,是人双手围在嘴边成喇叭状,对着远方高山发出" ...

  5. RESTful WebService 入门实例

      /* 新建MavenProject,使用以下代码,创建类和POM文件.使用命令行切换到Project根目录,运行mvn package(或者,选中pom.xml 文件右键单击 > run a ...

  6. Notes:一致性哈希算法

    业务场景: 存在三个专门提供缓存服务的服务器,前端所需要的图片等静态资源被缓存于这三个服务器其中之一. 但是如何提高查找图片的速度呢? 可以采用哈希算法. 常规意义上的哈希算法: 通过hash(图片名 ...

  7. Java NIO系列教程（六） 多路复用器Selector

    多路复用器Selector是Java NIO编程的基础,熟练地掌握Selector对于掌握NIO编程至关重要.多路复用器提供选择已经就绪的任务的能力.简单来讲,Selector会不断地轮询注册在其上的 ...

  8. java并发编程基础 --- 7章节 java中的13个原子操作类

    当程序更新一个变量时,如果多线程同时更新这个变量,可能得到期望之外的值,比如变量 i=1,A线程更新 i+1,B线程也更新 I+1,经过两个线程的操作之后可能 I不等于3,而是等于2.因为A和B线程更 ...

  9. LAMP平台部署（转）

    LAMP平台的概述 LAMP环境脚本部署:https://github.com/spdir/ShellScripts/tree/master/lamp LAMP的介绍:百度百科 LAMP平台的构成组件 ...

  10. Linux运维人员共用root帐户权限审计(转至马哥Linux运维）

    一.应用场景 在中小型企业,公司不同运维人员基本都是以root 账户进行服务器的登陆管理,缺少了账户权限审计制度.不出问题还好, 出了问题,就很难找出源头.这里介绍下,如何利用编译bash 使不同的客 ...