今天，我们来学习一下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. 20165230 学习基础和C语言基础调查

    20165230 学习基础和C语言基础调查 技能学习经验 我擅长弹钢琴.小时候我曾上过很多兴趣班,比如钢琴.跳舞.书法.绘画等等,唯一坚持至今的只有钢琴.仔细一算学习钢琴至今已有12年,不能说已经精通 ...

  2. ArcEngine 10.2 汉化问题

    开发环境:VS2010 + ArcEngine 10.2 + DEV 15.2 arcengine自带工具条提示汉化方法: 1:重写tool里的方法 2:利用工具箱里的ToopTip 3:把:ArcG ...

  3. 初始Windows程序

    1.属性 窗体标题 Name  窗体的图标 Icon  背景图片 BackgroundImage 背景颜色 BackColor  最大化按钮 MaxIMonBox  最小化按钮 Minimun 窗体边 ...

  4. BLESS学习笔记

    BLESS全称:Bloom-filter-based Error Correction Solution for High-throughput Sequencing Reads,即基于布隆过滤器的高 ...

  5. IDEA配置Struts框架

    对于刚接触编程的同学,对框架只是还不是很了解,本文主要介绍在Idea上配置Struts,实现简单的页面跳转,以及页面参数传递. 在进行代码编写之前先对Idea进行一个简单了解,对于长时间接触编程的,对 ...

  6. 测试工作中经常用到的几个Linux命令（第一弹）

    自己平时测试工作中经常要在Linux下搭建测试环境,有涉及到启动/终止服务器,修改tomcat配置文件,偶尔碰到端口被占用... 这时就不得不需要一些基本的Linux命令来处理遇到的这些问题(顺便迈向 ...

  7. 248&258--高级软件工程第三次作业

    0 小组成员 马帅 / 2017202110248 齐爽爽 / 2017282110258 1 项目 GitHub 地址 GitHub:https://github.com/whumashuai/QT ...

  8. 团队作业7-Beta版本冲刺计划及安排

    a.下一阶段需要改进完善的功能 对部分bug的修改,主要是在未登录时页面跳转的问题以及防止通过对数据库进行注入查询. b.下一阶段新增的功能 1.活动页面,提示打折信息等. 2.商家修改打折信息 3. ...

  9. Java课程设计报告——学生成绩管理系统

    一.需求分析 1.数据存储在数据库和文件中 2.分为"教师"模块和"学生"模块. 3.学生模块提供登陆功能,登陆成功后可查询数学.Java.体育成绩 (学生学号 ...

  10. 老板怎么办，我们网站遭到DDoS攻击又挂了？

    相信现在正在阅读此文的你,一定听说过发生在上个月的史上最大的DDoS攻击. 美国东部时间2月28日,GitHub在一瞬间遭到高达1.35Tbps的带宽攻击.这次DDoS攻击几乎可以堪称是互联网有史以来 ...