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 设计模式 安全沙箱模式
Sep 24 Javascript
在一个js文件里远程调用jquery.js会在ie8下的一个奇怪问题
Nov 28 Javascript
jquery 查找select ,并触发事件的实现代码
Mar 30 Javascript
JavaScript的parseInt 取整使用
May 09 Javascript
利用jquery操作Radio方法小结
Oct 20 Javascript
浅谈JavaScript中的string拥有方法的原因
Aug 28 Javascript
JavaScript判断FileUpload控件上传文件类型
Sep 28 Javascript
jQuery使用$.each遍历json数组的简单实现方法
Apr 18 Javascript
js自定义select下拉框美化特效
May 12 Javascript
jQuery Ajax全解析
Feb 13 Javascript
javascript 动态生成css代码的两种方法
Mar 17 Javascript
vue2路由方式--嵌套路由实现方法分析
Mar 06 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
SONY ICF-SW55的电路分析
2021/03/02 无线电
PHP 和 MySQL 基础教程(一)
2006/10/09 PHP
将OICQ数据转成MYSQL数据
2006/10/09 PHP
php 设计模式之 单例模式
2008/12/19 PHP
深入PHP数据加密详解
2013/06/18 PHP
PHP程序员基本要求和必备技能
2014/05/09 PHP
php实现压缩多个CSS与JS文件的方法
2014/11/11 PHP
php+ajax实现文章自动保存的方法
2014/12/30 PHP
PHP中is_file()函数使用指南
2015/05/08 PHP
php验证码生成代码
2015/11/11 PHP
PHP实现将上传图片自动缩放到指定分辨率,并保持清晰度封装类示例
2019/06/17 PHP
Centos7 Yum安装PHP7.2流程教程详解
2019/07/02 PHP
js中通过split函数分割字符串成数组小例子
2013/09/21 Javascript
jquery ajax应用中iframe自适应高度问题解决方法
2014/04/12 Javascript
javascript去除空格方法小结
2015/05/21 Javascript
关于JS 预解释的相关理解
2016/06/28 Javascript
BootStrap网页中代码显示用法详解
2016/10/21 Javascript
小程序ios音频播放没声音问题的解决
2018/07/11 Javascript
Vue.js实现表格渲染的方法
2018/09/07 Javascript
详解angular2 控制视图的封装模式
2018/12/27 Javascript
微信小程序+腾讯地图开发实现路径规划绘制
2019/05/22 Javascript
Python3获取拉勾网招聘信息的方法实例
2019/04/03 Python
Python实现决策树并且使用Graphviz可视化的例子
2019/08/09 Python
python ctypes库2_指定参数类型和返回类型详解
2019/11/19 Python
python的scipy.stats模块中正态分布常用函数总结
2021/02/19 Python
CSS3的文字阴影—text-shadow的使用方法
2012/12/25 HTML / CSS
纯CSS3单页切换导航菜单界面设计的简单实现
2016/08/16 HTML / CSS
德国玩具商店:Planet Happy DE
2021/01/16 全球购物
领导的自我鉴定
2013/12/28 职场文书
素质拓展感言
2014/01/29 职场文书
2014年仓库工作总结
2014/11/20 职场文书
会议欢迎词范文
2015/01/27 职场文书
2015年世界水日活动总结
2015/02/09 职场文书
公司催款律师函
2015/05/27 职场文书
2016元旦晚会主持词
2015/07/01 职场文书
2015年卫生院健康教育工作总结
2015/07/24 职场文书