angular中怎么使用指令来实现两个选项卡的问题
- 零下一度原创
- 2017-06-27 09:57:271475浏览
今天，我们来学习一下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 ? 'block' : 'none'}">{{data.content}}</p></span><br><span style="font-size: 18px"></div><br>这样小小的两个选项卡效果就完成了，你们学会了吗？你们也可以使用自定义指令的方式写拖拽。</span>
<span style="font-size: 18px"><br><br><br></span>
以上是angular中怎么使用指令来实现两个选项卡的问题的详细内容。更多信息请关注PHP中文网其他相关文章！
声明：
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn