angular中怎么使用指令来实现两个选项卡的问题-tutorial js-php.cn

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

零下一度

Lepaskan： 2017-06-27 09:57:27

asal

1461 orang telah melayarinya

今天，我们来学习一下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>

Salin selepas log masuk

<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>

Salin selepas log masuk

<span style="font-size: 18px"><br><br><br></span>

Salin selepas log masuk

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