angular中怎么使用指令来实现两个选项卡的问题
程序员文章站
2022-03-18 16:22:05
...
今天，我们来学习一下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?1.1.11"></script>
<script src="angular.min.js?1.1.11"></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>
这样小小的两个选项卡效果就完成了，你们学会了吗？你们也可以使用自定义指令的方式写拖拽。
以上就是angular中怎么使用指令来实现两个选项卡的问题的详细内容，更多请关注其它相关文章！