So verwenden Sie Direktiven, um zwei Tabulatoren in Angular zu implementieren-js-Tutorial-php.cn

So verwenden Sie Direktiven, um zwei Tabulatoren in Angular zu implementieren

零下一度

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

Original

1461 Leute haben es durchsucht

Heute lernen wir, wie man mithilfe von Anweisungen zwei Registerkarten in Angular implementiert.

Zunächst müssen Sie die jQuery-Datei und die AngularJS-Datei vorstellen.

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonSo verwenden Sie Direktiven, um zwei Tabulatoren in Angular zu implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!