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