Comment utiliser des directives pour implémenter deux onglets en angulaire-js tutoriel-php.cn

Comment utiliser des directives pour implémenter deux onglets en angulaire

零下一度

Libérer： 2017-06-27 09:57:27

original

1486 Les gens l'ont consulté

Aujourd'hui, apprenons à utiliser les instructions pour implémenter deux onglets dans Angular.

Tout d'abord, vous devez introduire le fichier jQuery et le fichier angulairejs.

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!