zoukankan      html  css  js  c++  java
  • AngularJs 指令实现选项卡

    HTML:

    <body ng-controller="Aaa">
        <my-tab my-id="div1" my-data="data1"></my-tab>
        <my-tab my-id="div2" my-data="data2"></my-tab>
    </body>

    js:

    var m1=angular.module('myApp',[]);
            m1.directive('myTab',function(){
                return {
                    restrict:"E",
                    replace:true,
                    templateUrl:"temp.html",
                    scope:{
                        myId:'@',
                        myData:'='
                    },
                    link:function(scope,ele,attr){
                        $(ele).delegate('input','click',function(){
                            $(this).toggleClass('active').siblings().removeClass('active');
                            $(this).siblings('div').eq($(this).index()).css('display','block').siblings('div').css('display','none');
                        });
                    }
                };
            });
            m1.controller('Aaa',['$scope',function($scope){
                $scope.data1=[
                    {title:'111',content:"111111"},
                    {title:'222',content:"222222"},
                    {title:'333',content:"333333"}
                ];
                $scope.data2=[
                    {title:'444',content:"444444"},
                    {title:'555',content:"555555"}
                ];
            }]);

    temp.html:

    <div id="{{myId}}">
        <input ng-repeat="data in myData" type="button" ng-value="{{data.title}}" ng-class="{active:$first}">
        <div ng-repeat="data in myData" ng-style="{display:$first?'block':'none'}">{{data.content}}</div>
    </div>
  • 相关阅读:
    3D 立体动态图 代码:
    自由切换 网页上的 ico 图标
    ES6 基本语法:
    JavaScript中class类的介绍
    React_01_ECMAScript6
    使用JS计算前一天和后一天
    Web 前端学习计划
    read
    java对象实例化
    关于为什么java需要垃圾回收
  • 原文地址:https://www.cnblogs.com/shytong/p/5060720.html
Copyright © 2011-2022 走看看