AngularJS折叠菜单实现方法示例


Posted in Javascript onMay 18, 2017

本文实例讲述了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程序设计有所帮助。

Javascript 相关文章推荐
JavaScript 异步调用框架 (Part 2 - 用例设计)
Aug 03 Javascript
JavaScript读取中文cookie时的乱码问题的解决方法
Oct 14 Javascript
基于jquery自定义图片热区效果
Jul 21 Javascript
javascript操作html控件实例(javascript添加html)
Dec 02 Javascript
js实现iframe自动自适应高度的方法
Feb 17 Javascript
jQuery实现可关闭固定于底(顶)部的工具条菜单效果
Nov 06 Javascript
jquery淡入淡出效果简单实例
Jan 14 Javascript
javascript实现PC网页里的拖拽效果
Mar 14 Javascript
js闭包引起的事件注册问题介绍
Mar 29 Javascript
JS获取本周周一,周末及获取任意时间的周一周末功能示例
Feb 09 Javascript
在ES5与ES6环境下处理函数默认参数的实现方法
May 13 Javascript
原生js代码能实现call和bind吗
Jul 31 Javascript
jQuery Validate 校验多个相同name的方法
May 18 #jQuery
easyUI下拉列表点击事件使用方法
May 18 #Javascript
AngularJS自定义指令之复制指令实现方法
May 18 #Javascript
AngularJS使用ng-class动态增减class样式的方法示例
May 18 #Javascript
Vue中img的src属性绑定与static文件夹实例
May 18 #Javascript
JS验证全角与半角及相互转化的介绍
May 18 #Javascript
Vue-cli proxyTable 解决开发环境的跨域问题详解
May 18 #Javascript
You might like
php5 and xml示例
2006/11/22 PHP
php设计模式  Command(命令模式)
2011/06/17 PHP
php简单获取文件扩展名的方法
2015/03/24 PHP
Javascript学习笔记9 prototype封装继承
2010/01/11 Javascript
javascript对talbe进行动态添加、删除、验证实现代码
2012/03/29 Javascript
由点击页面其它地方隐藏div所想到的jQuery的delegate
2013/08/29 Javascript
jQuery网页版打砖块小游戏源码分享
2015/08/20 Javascript
js调用百度地图及调用百度地图的搜索功能
2015/09/07 Javascript
js小数运算出现多位小数如何解决
2015/10/08 Javascript
让你一句话理解闭包(简单易懂)
2016/06/03 Javascript
AngularJS bootstrap启动详解及实例代码
2016/09/14 Javascript
Bootstrap时间选择器datetimepicker和daterangepicker使用实例解析
2016/09/17 Javascript
Bootstrap多级菜单的实现代码
2017/05/23 Javascript
简单说说angular.json文件的使用
2018/10/29 Javascript
jQuery实现的五星点评功能【案例】
2019/02/18 jQuery
深入浅出 Vue 系列 -- 数据劫持实现原理
2019/04/23 Javascript
layui监听工具栏的实例(操作列表按钮)
2019/09/10 Javascript
原生JavaScript之es6中Class的用法分析
2020/02/23 Javascript
vue中的过滤器及其时间格式化问题
2020/04/09 Javascript
[01:53]DOTA2超级联赛专访Zhou 五年职业青春成长
2013/05/29 DOTA
Python实现全局变量的两个解决方法
2014/07/03 Python
python 获取当天每个准点时间戳的实例
2018/05/22 Python
Python拼接字符串的7种方法总结
2018/11/01 Python
python 获取键盘输入,同时有超时的功能示例
2018/11/13 Python
Django urls.py重构及参数传递详解
2019/07/23 Python
python 发送json数据操作实例分析
2019/10/15 Python
opencv-python的RGB与BGR互转方式
2020/06/02 Python
python装饰器实现对异常代码出现进行自动监控的实现方法
2020/09/15 Python
接受捐赠答谢词
2014/01/27 职场文书
语文教学感言
2014/02/06 职场文书
支部组织生活会方案
2014/06/10 职场文书
我是一名护士演讲稿
2014/08/28 职场文书
车辆年审委托书范本
2014/09/18 职场文书
2014年语文教师工作总结
2014/12/18 职场文书
公司客户答谢酒会祝酒词
2015/08/11 职场文书
dubbo服务整合zipkin详解
2021/07/26 Java/Android