cari

Rumah >hujung hadapan web >tutorial js >angular中怎么使用指令来实现两个选项卡的问题

angular中怎么使用指令来实现两个选项卡的问题

零下一度
零下一度asal
2017-06-27 09:57:271485semak imbas

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

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

<span style="font-size: 18px"><!DOCTYPE html></span><br><span style="font-size: 18px"><html lang="en" ng-app="app"></span><br><span style="font-size: 18px"><head></span><br><span style="font-size: 18px">    <meta charset="UTF-8"></span><br><span style="font-size: 18px">    <title>Title</title></span><br><span style="font-size: 18px">    <style></span><br><span style="font-size: 18px">        /*定义选中按钮样式*/</span><br><span style="font-size: 18px">        .on {</span><br><span style="font-size: 18px">            background: red;</span><br><span style="font-size: 18px">        }</span><br><span style="font-size: 18px">        /*对内容进行布局*/</span><br><span style="font-size: 18px">        p {</span><br><span style="font-size: 18px">            border: #000 1px solid;</span><br><span style="font-size: 18px">            width: 200px;</span><br><span style="font-size: 18px">            display: none;</span><br><span style="font-size: 18px">            height: 200px;</span><br><span style="font-size: 18px">        }</span><br><span style="font-size: 18px">    </style></span><br><span style="font-size: 18px">    <script src="jquery-3.1.1.js?1.1.11"></script></span><br><span style="font-size: 18px">    <script src="angular.min.js?1.1.11"></script></span><br><span style="font-size: 18px">    <script></span><br><span style="font-size: 18px">        var app=angular.module("app",[]);//定义angular模块</span><br><span style="font-size: 18px">        app.controller("ctrl",function ($scope) {</span><br><span style="font-size: 18px">            $scope.list=[</span><br><span style="font-size: 18px">                {"name":"新闻","content":"新闻"},</span><br><span style="font-size: 18px">                {"name":"体育","content":"体育"},</span><br><span style="font-size: 18px">                {"name":"娱乐","content":"娱乐"}</span><br><span style="font-size: 18px">                ];</span><br><span style="font-size: 18px">            $scope.list2=[</span><br><span style="font-size: 18px">                {"name":"新闻2","content":"新闻2"},</span><br><span style="font-size: 18px">                {"name":"体育2","content":"体育2"},</span><br><span style="font-size: 18px">                {"name":"娱乐2","content":"娱乐2"},</span><br><span style="font-size: 18px">                {"name":"农业","content":"农业"}</span><br><span style="font-size: 18px">            ]</span><br><span style="font-size: 18px">        });</span><br><span style="font-size: 18px">        app.directive("myTab",function () { //定义名字时要使用驼峰式命名法</span><br><span style="font-size: 18px">            return{</span><br><span style="font-size: 18px">                link:function (scope,element,attr) {//使用jQuery来实现效果</span><br><span style="font-size: 18px">                    element.delegate("input","click",function () {</span><br><span style="font-size: 18px">                        $(this).attr("class","on").siblings("input").attr("class","");</span><br><span style="font-size: 18px">                        $(this).siblings("p").eq($(this).index()).show().siblings("p").hide();</span><br><span style="font-size: 18px">                    })</span><br><span style="font-size: 18px">                },</span><br><span style="font-size: 18px">                restrict:"ECMA",</span><br><span style="font-size: 18px">                replace:true,</span><br><span style="font-size: 18px">//                scope:true,//解决冲突问题</span><br><span style="font-size: 18px">                scope:{</span><br><span style="font-size: 18px">                    myId:"@",  //绑定字符串</span><br><span style="font-size: 18px">                    myData:"=" //绑定变量</span><br><span style="font-size: 18px">                }</span><br><span style="font-size: 18px">                templateUrl:"tab.html"</span><br><span style="font-size: 18px">            }</span><br><span style="font-size: 18px">        })</span><br><span style="font-size: 18px">    </script></span><br><span style="font-size: 18px"></head></span><br><span style="font-size: 18px"><body ng-controller="ctrl"></span><br><span style="font-size: 18px">    <my-tab my-id="div1" my-data="list"></my-tab></span><br><span style="font-size: 18px">    <my-tab my-id="div2" my-data="list2"></my-tab></span><br><span style="font-size: 18px"></body></span><br><span style="font-size: 18px"></html><br><br>tab.html部分<br></span>
<span style="font-size: 18px"><div id="{{myId}}"></span><br><span style="font-size: 18px">    <input ng-repeat="data in myData" type="button" value="{{data.title}}" ng-class="{on:$first}"></span><br><span style="font-size: 18px">    <p ng-repeat="data in myData" ng-style="{display: $first ?  &#39;block&#39; : &#39;none&#39;}">{{data.content}}</p></span><br><span style="font-size: 18px"></div><br>这样小小的两个选项卡效果就完成了，你们学会了吗？你们也可以使用自定义指令的方式写拖拽。</span>
<span style="font-size: 18px"><br><br><br></span>

Atas ialah kandungan terperinci angular中怎么使用指令来实现两个选项卡的问题. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：input的blur事件与button的click事件详细介绍Artikel seterusnya：总结jquery判断复选框是否被选中实例

Artikel berkaitan

Lihat lagi