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 相关文章推荐
js继承 Base类的源码解析
Dec 30 Javascript
JavaScript的类型转换(字符转数字 数字转字符)
Aug 30 Javascript
javascript数组操作(创建、元素删除、数组的拷贝)
Apr 07 Javascript
extjs_02_grid显示本地数据、显示跨域数据
Jun 23 Javascript
IE6浏览器中window.location.href无效的解决方法
Nov 20 Javascript
Nginx上传文件全部缓存解决方案
Aug 17 Javascript
基于JS实现密码框(password)中显示文字提示功能代码
May 27 Javascript
JavaScript 冒泡排序和选择排序的实现代码
Sep 03 Javascript
Bootstrap一款超好用的前端框架
Sep 25 Javascript
Vue底层实现原理总结
Feb 17 Javascript
jQuery实现简单复制json对象和json对象集合操作示例
Jul 09 jQuery
送你43道JS面试题(收藏)
Jun 17 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
在WINDOWS中设置计划任务执行PHP文件的方法
2011/12/19 PHP
PHP中使用FFMPEG获取视频缩略图和视频总时长实例
2014/05/04 PHP
百度工程师讲PHP函数的实现原理及性能分析(三)
2015/05/13 PHP
PHP获取表单数据与HTML嵌入PHP脚本的实现
2017/02/09 PHP
PHP+AJAX 投票器功能
2017/11/11 PHP
Javascript - HTML的request类
2006/07/15 Javascript
收藏一些不常用,但是有用的代码
2007/03/12 Javascript
javascript 事件绑定问题
2011/01/01 Javascript
suggestion开发小结以及对键盘事件的总结(针对中文输入法状态)
2011/12/20 Javascript
实例分析javascript中的call()和apply()方法
2014/11/28 Javascript
node.js [superAgent] 请求使用示例
2015/03/13 Javascript
jquery图片滚动放大代码分享(2)
2015/08/28 Javascript
Angularjs实现多个页面共享数据的方式
2016/03/29 Javascript
JS动态创建元素的两种方法
2016/04/20 Javascript
原生的强大DOM选择器querySelector介绍
2016/12/21 Javascript
基于vue 实现token验证的实例代码
2017/12/14 Javascript
js实现把时间戳转换为yyyy-MM-dd hh:mm 格式(es6语法)
2017/12/28 Javascript
原生JS实现逼真的图片3D旋转效果详解
2019/02/16 Javascript
layui数据表格实现重载数据表格功能(搜索功能)
2019/07/27 Javascript
React Native登录之指纹登录篇的示例代码
2020/11/03 Javascript
打印出python 当前全局变量和入口参数的所有属性
2009/07/01 Python
关于Python中Inf与Nan的判断问题详解
2017/02/08 Python
Python实现嵌套列表及字典并按某一元素去重复功能示例
2017/11/30 Python
Python判断对象是否为文件对象(file object)的三种方法示例
2019/04/26 Python
图解python全局变量与局部变量相关知识
2019/11/02 Python
TensorFlow tf.nn.conv2d实现卷积的方式
2020/01/03 Python
Python基于Serializer实现字段验证及序列化
2020/11/04 Python
妇科医生自荐信
2013/11/05 职场文书
店长助理岗位职责
2013/12/13 职场文书
家长对小学生的评语
2014/01/28 职场文书
2014年作风建设心得体会
2014/10/22 职场文书
单身证明范本
2015/06/15 职场文书
七年级语文教学反思
2016/03/03 职场文书
2019单位介绍信怎么写
2019/06/24 职场文书
如何用JS实现网页瀑布流布局
2021/04/24 Javascript
Li list-style-image 图片垂直居中实现方法
2023/05/21 HTML / CSS