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 相关文章推荐
基于jQuery的固定表格头部的代码(IE6,7,8测试通过)
May 18 Javascript
jQuery学习笔记(4)--Jquery中获取table中某列值的具体思路
Apr 10 Javascript
JQuery的$和其它JS发生冲突的快速解决方法
Jan 24 Javascript
js格式化金额可选是否带千分位以及保留精度
Jan 28 Javascript
JQuery下拉框应用示例介绍
Apr 23 Javascript
jQuery实现横向带缓冲的水平运动效果(附demo源码下载)
Jan 29 Javascript
JavaScript中Object.prototype.toString方法的原理
Feb 24 Javascript
使用Script元素发送JSONP请求的方法
Jun 12 Javascript
js实现String.Fomat的实例代码
Sep 02 Javascript
基于Vue如何封装分页组件
Dec 16 Javascript
微信小程序开发之IOS和Android兼容的问题
Sep 26 Javascript
Vue唯一可以更改vuex实例中state数据状态的属性对象Mutation的讲解
Jan 18 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
php将图片保存入mysql数据库失败的解决方法
2014/12/27 PHP
php session 写入数据库
2016/02/13 PHP
使用ThinkPHP生成缩略图及显示
2017/04/27 PHP
基于PHP实现邮箱验证激活过程详解
2020/10/28 PHP
JS替换文本域内的回车示例
2014/02/18 Javascript
深入理解JavaScript中的箭头函数
2015/07/28 Javascript
javascript+html5实现绘制圆环的方法
2015/07/28 Javascript
JQuery组件基于Bootstrap的DropDownList(完整版)
2016/07/05 Javascript
js实现文字无缝向上滚动
2017/02/16 Javascript
js省市区级联查询(插件版&amp;无插件版)
2017/03/21 Javascript
微信小程序 实例开发总结
2017/04/26 Javascript
WebSocket实现简单客服聊天系统
2017/05/12 Javascript
js案例之鼠标跟随jquery版(实例讲解)
2017/07/21 jQuery
koa2 从入门到精通(小结)
2019/07/23 Javascript
Python实现的一个自动售饮料程序代码分享
2014/08/25 Python
把项目从Python2.x移植到Python3.x的经验总结
2015/04/20 Python
python实现求特征选择的信息增益
2018/12/18 Python
详解pandas.DataFrame中删除包涵特定字符串所在的行
2019/04/04 Python
详解一种用django_cache实现分布式锁的方式
2019/09/01 Python
django2.2安装错误最全的解决方案(小结)
2019/09/24 Python
python 循环数据赋值实例
2019/12/02 Python
pytorch 归一化与反归一化实例
2019/12/31 Python
html5+CSS3+JS实现七夕言情功能代码
2017/08/28 HTML / CSS
英国最大的奢侈珠宝和手表网站:C W Sellors
2017/02/10 全球购物
Volcom法国官网:美国冲浪滑板品牌
2017/05/25 全球购物
环法自行车赛官方商店:Le Tour de France
2017/08/27 全球购物
德国传统玻璃制造商:Cristalica
2018/04/23 全球购物
印度排名第一的蛋糕、鲜花和礼品送货:Winni
2019/08/02 全球购物
在线实验室测试:HealthLabs.com
2020/05/03 全球购物
必须要使用游标的SQL语句有那些
2012/05/07 面试题
Internet主要有哪些网络群组成
2015/12/24 面试题
葡萄牙语专业个人求职信
2013/12/10 职场文书
软件专业毕业生个人自我鉴定
2014/04/17 职场文书
餐饮服务员岗位职责
2015/02/09 职场文书
食品安全责任书范本
2015/05/09 职场文书
Golang Elasticsearches 批量修改查询及发送MQ
2022/04/19 Golang