angularjs折叠菜单

最新推荐文章于 2024-05-30 09:51:11 发布

原创最新推荐文章于 2024-05-30 09:51:11 发布 · 9.3k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#折叠菜单 #angularjs

Angularjs 专栏收录该内容

55 篇文章

订阅专栏

这篇博客展示了如何使用AngularJS创建一个折叠菜单。通过定义`accordion`和`expander`指令，实现了点击标题展开/收起菜单项的功能。在`SomeController`中，初始化了多个菜单项的数据。该示例利用了AngularJS的模块、指令和数据绑定特性。

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <link rel="stylesheet" href="bootstrap.min.css">
        <script src="jquery.min.js"></script>
        <script src="angular.min.js"></script>
       <script src="bootstrap.min.js"></script>
       <script type="text/javascript">
           var expModule=angular.module('expanderModule',[])
           expModule.directive('accordion', function() {
               return {
                   restrict : 'EA',
                   replace : true,
                   transclude : true,
                   template : '<div ng-transclude></div>',
                   controller : function() {
                       var expanders = [];
                       this.gotOpened = function(selectedExpander) {
                           angular.forEach(expanders, function(expander) {
                               if (selectedExpander != expander) {
                                   expander.showMe = false;
                               }
                           });
                       }
                       this.addExpander = function(expander) {
                           expanders.push(expander);
                       }
                   }
               }
           });

           expModule.directive('expander', function() {
               return {
                   restrict : 'EA',
                   replace : true,
                   transclude : true,
                   require : '^?accordion',
                   scope : {
                       title : '=expanderTitle'
                   },
                   template : '<div>'
                              + '<div class="title" ng-click="toggle()">{{title}}</div>'
                              + '<div class="body" ng-show="showMe" ng-transclude></div>'
                              + '</div>',
                   link : function(scope, element, attrs, accordionController) {
                       scope.showMe = false;
                       accordionController.addExpander(scope);
                       scope.toggle = function toggle() {
                           scope.showMe = !scope.showMe;
                           accordionController.gotOpened(scope);
                       }
                   }
               }
           });

           expModule.controller("SomeController",function($scope) {
               $scope.expanders = [{
                   title : '1',
                   text : '1.1.'
               }, {
                   title : '2',
                   text : '2.2'
               }, {
                   title : '3',
                   text : '3.3'
               }];
           });
       </script>
       <style type="text/css">
           .expander {
               border: 1px solid black;
               width: 250px;
           }

           .expander>.title {
               background-color: black;
               color: white;
               padding: .1em .3em;
               cursor: pointer;
           }

           .expander>.body {
               padding: .1em .3em;
           }
       </style>
    </head>
    <body ng-app="expanderModule" ng-controller='SomeController'>
        <accordion>
           <expander class='expander' ng-repeat='expander in expanders' expander-title='expander.title'>
               {{expander.text}}
           </expander>
       </accordion>
    </body>
</html>