AngularJS折叠菜单实现方法示例

2019-11-19 16:33:26

字体：大中小

来源：转载

供稿：网友

本文实例讲述了AngularJS折叠菜单实现方法。分享给大家供大家参考，具体如下：

<!DOCTYPE html><html>  <head>     <meta name="viewport" content="width=device-width, initial-scale=1.0">    <link rel="stylesheet" href="bootstrap.min.css" rel="external nofollow" >    <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>

更多关于AngularJS相关内容感兴趣的读者可查看本站专题：《AngularJS指令操作技巧总结》、《AngularJS入门与进阶教程》及《AngularJS MVC架构总结》

希望本文所述对大家AngularJS程序设计有所帮助。

上一篇：Vue2 使用 Echarts 创建图表实例代码

下一篇：jQuery Validate 校验多个相同name的方法