Angular js로 수평 아코디언을 만드는 방법은 무엇입니까?

저는 Angular.js를 처음 사용하기 때문에 Angular.js에서 수직 아코디언을 얻었습니다. 그러나 사실 저는 가로 아코디언이 필요합니다. 여기에 수직 아코디언이 있습니다 : http://jsfiddle.net/carpasse/RST62/Angular js로 수평 아코디언을 만드는 방법은 무엇입니까?

동일한 가로 아코디언이 필요합니다 : http://stitchui.com/liteaccordion/ 예를 들어이 링크를 확인하십시오.

코드

var directivesModule = angular.module('myModule', []); 
directivesModule.directive('accordion', function factory(){ 
    return { 
     priority:0, 
     restrict:'E', 
     transclude:true, 
     replace:true, 
     scope:{}, 
     template:'<div class="accordion" ng-transclude></div>', 
     link: function(scope, iElement, iAttr){ 
      iElement.accordion({header: "h3.accordionTitle"}); 
     } 
    }; 
}); 

directivesModule.directive('accordionTab', function(){ 
    return { 
     priority:1, 
     restrict:'E', 
     replace:true, 
     transclude:true, 
     scope:{ title:'bind'}, 
     template:'<div><h3 class="accordionTitle"><a href="#">{{title}}</a></h3>' + 
       '<div ng-transclude></div></div>' 
    }; 
});

출처

2014-11-27 manoji stack

이 각도없는, CSS의 문제이다. 링크에서 라이브러리를 포함시키지 않는 이유는 무엇입니까? 이것은 목적을 달성 할 것입니다. 행운을 빕니다!

출처

2014-11-27 10:13:37 DebbieMiller

내가, 인 flexbox을 AngularJS와를 사용하여 수평 아코디언을 만든

<html> 
<head> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
    <title>AngularJS Accordion</title> 
    <script type='text/javascript' src='//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.1/angular.js'></script> 
    <link rel="stylesheet" type="text/css" href="/css/normalize.css"> 
    <link rel="stylesheet" type="text/css" href="/css/result-light.css"> 
    <link rel="stylesheet" type="text/css" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css"> 
    <style type='text/css'> 
    .thermo-buttons button{ 
     height: 40px; 
     width: 50px; 
     font-size: 9px; 
     background-color: #252424; 
     opacity: 0.5; 
     color: #ffffff; 
     font-weight: bold; 
     border:1px solid #dddddd; 
    } 
    .thermo-buttons button.selected{ 
     background-color: #ff600a; 
     opacity: 1.0; 
    } 
    .thermo-buttons button.activated{ 
     background-color: #ff600a; 
     opacity: 1.0; 
    } 
    .thermo-buttons button :active{ 
     background-color: #ff600a; 
    } 
    .thermo-buttons .btn-accord { 
     border-top-right-radius: 20px; 
     border-bottom-right-radius: 20px; 
     width: 60px; 
     background-color: #dddddd; 
     color: #000000; 
     border-left: 1px solid #808080; 
     opacity: 1.0; 
    } 
    .accord_list { 

     -webkit-transition: 0.5s linear all; 
     transition: 0.5s linear all; 
    } 
    .accord_list.ng-hide-add, .accord_list.ng-hide-remove 
    { 
     opacity: 1.0; 

    } 
    .accord_list.ng-hide-remove, .accord_list.ng-hide-add.ng-hide-add-active{ 
     width: 0px; 
     opacity: 0.3; 

    } 
    .accord_list.ng-hide-remove.ng-hide-remove-active, .accord_list.ng-hide-add{ 

     width: 200px; 
     opacity: 0.3; 
    } 
    </style> 




    <script type='text/javascript'> 

    function TodoCtrl($scope) { 
     $scope.isaccordExpand = false; 

     $scope.expandaccord = function() { 
     if($scope.isaccordExpand){ 
      $scope.isaccordExpand = false; 
     }else { 
      $scope.isaccordExpand = true; 
     } 
     } 


    } 
    </script> 

</head> 

<body> 

    <div ng-app> 
    <div ng-controller="TodoCtrl"> 
     <table class="thermo-buttons"> 
     <tr> 
      <td> 
      <table class="accord_list" ng-show="isaccordExpand"> 
       <tr> 
       <td><button >Accordion1</button></td> 
       <td><button >Accordion2</button></td> 
       <td><button >Accordion3</button></td> 
       <td><button>Accordion4</button></td> 
       </tr> 
      </table> 
      </td> 
      <td><button class="btn-accord" ng-click="expandaccord()">Accordion</button></td> 
     </tr> 
     </table> 
    </div> 
    </div> 


</body> 

</html>

출처

2015-10-22 06:59:46

이 코드를 사용해보십시오. 모든 아코디언에 대해 아코디언 아이템이 존재하기 때문에 매우 간단하다고 생각합니다. https://plnkr.co/edit/XPoTjvPXF5s2U0KLBCgB?p=preview

: 여기

<horizontal-accordion active-tab="ctrl.activeStep"> 
    <horizontal-accordion-item done="true"> 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum, distinctio, ab, possimus fugit reprehenderit eligendi soluta expedita aspernatur eum minima tempore similique quasi saepe officiis modi. Aspernatur, commodi iusto ipsa. 
    </horizontal-accordion-item> 
    <horizontal-accordion-item> 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, quasi, laudantium, enim amet accusamus adipisci repudiandae nesciunt cumque odio voluptate quo dicta blanditiis vel eveniet a ducimus at modi dignissimos. 
    </horizontal-accordion-item> 
    <horizontal-accordion-item> 
    Accordion content 3 
    </horizontal-accordion-item> 
    <horizontal-accordion-item done="true"> 
    Accordion content 4 
    </horizontal-accordion-item> 
</horizontal-accordion>

은 Plnkr에 대한 링크입니다

출처

2016-09-09 17:23:34 PennyBirman

Angular js로 수평 아코디언을 만드는 방법은 무엇입니까?

답변

관련 문제