今天，我们来学习一下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. python趣味 ——奇葩的全局形参

    在c++,c#,js等语言中: 函数定义(参数) 函数体:参数修改 这里的参数修改都是仅限于这个函数体内的 python不知道是不是bug,我们这样写: def test(a=[]): a.appen ...

  2. 2017/11/25 2D变换

    2D变换 一.盒模型解析模式 1.box-sizing:盒模型解析模式 1)content-box:标准盒模型(和css2一样的计算) 宽度和高度之外绘制元素的内边距和边框 width,height外 ...

  3. Mycat 安装与启动

    环境准备 安装JDK1.8(必须JDK1.7及更高版本) 安装MySQL 服务安装与说明 下载 MyCAT 编译好的安装包,下载地址为 http://dl.mycat.io/1.6-RELEASE/ ...

  4. 笔记：Hibernate 持久化类标注示例-双向1-N关系映射

    1-N关系的1端持久化类 package org.drsoft.hibernate.model.oneToMany;     import java.util.Date; import java.ut ...

  5. [iOS]详解调整UIButton的title和image的位置

    UIButton的默认布局是:title在右,image在左; 很多时候我们需要的是title在左边,或者title在下面,这时就需要调整UIButton的TitleLabel和ImageView的位 ...

  6. kvm之三：本地安装虚拟机

    1.格式化新添加的磁盘 [root@kvm ~ ::]#fdisk /dev/sdb Command (m for help): n //新建分区 Command action e extended ...

  7. oracle维护数据的完整性

    介绍: 数据的完整性用于确保数据库数据遵从一定的商业的逻辑规则.在oracle中,数据完整性可以使用约束.触发器.应用程序(过程.函数)三种方法来实现,在这三种方法中,因为约束易于维护,并且具有最好的 ...

  8. 基于bootstrap的表格数据展示

    一.导入bootstrap文件 二.前端html代码 对应的是前台条件查询和js数据获取 js数据获取部分在第四段 三.后台数据 total为集合总数  int类型 rows为前台需要展示的数据集合 ...

  9. 漫谈Java IO之 Netty与NIO服务器

    前面介绍了基本的网络模型以及IO与NIO,那么有了NIO来开发非阻塞服务器,大家就满足了吗?有了技术支持,就回去追求效率,因此就产生了很多NIO的框架对NIO进行封装--这就是大名鼎鼎的Netty. ...

  10. C语言使用指针变量指向字符串，对字符串进行处理后再将指针移向开头为什么不能输出？（使用Dev-c++进行编译）

    # include <stdio.h> # include <stdlib.h> int main() { char *point_1="aaaaaabbbbbbzz ...