angular中怎么使用指令来实现两个选项卡的问题

来源：动视网责编：小采时间：2020-11-27 20:18:34

angular中怎么使用指令来实现两个选项卡的问题

angular中怎么使用指令来实现两个选项卡的问题:今天，我们来学习一下angular中怎么使用指令来实现两个选项卡的问题。首先，要先引入jQuery文件与angularjs文件。<!DOCTYPE html><html lang="en" ng-app="app"><head> <me

推荐度：

点击下载本文 文档为doc格式

导读angular中怎么使用指令来实现两个选项卡的问题:今天，我们来学习一下angular中怎么使用指令来实现两个选项卡的问题。首先，要先引入jQuery文件与angularjs文件。<!DOCTYPE html><html lang="en" ng-app="app"><head> <me

今天，我们来学习一下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中怎么使用指令来实现两个选项卡的问题

推荐度：

点击下载本文 文档为doc格式

标签：实现指令使用指令

热门焦点

angular中怎么使用指令来实现两个选项卡的问题

angular中怎么使用指令来实现两个选项卡的问题

angular中怎么使用指令来实现两个选项卡的问题

最新推荐

猜你喜欢

热门推荐