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获取textarea中的光标位置
May 06 Javascript
javascript闭包的理解和实例
Aug 12 Javascript
jquery 实现上下滚动效果示例代码
Aug 09 Javascript
PHP开发者必须掌握的6个关键字
Apr 14 Javascript
你有必要知道的25个JavaScript面试题
Dec 29 Javascript
浅谈javascript基础之客户端事件驱动
Jun 10 Javascript
浅析location.href跨窗口调用函数
Nov 22 Javascript
Node.js+ES6+dropload.js实现移动端下拉加载实例
Jun 01 Javascript
JScript实现表格的简单操作
Aug 15 Javascript
Vue项目从webpack3.x升级webpack4不完全指南
Apr 28 Javascript
AngularJs中$cookies简单用法分析
May 30 Javascript
详解vue中v-model和v-bind绑定数据的异同
Aug 10 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中如何判断一个网页请求是ajax请求还是普通请求
2013/08/10 PHP
Zend Framework教程之连接数据库并执行增删查的方法(附demo源码下载)
2016/03/21 PHP
PHP延迟静态绑定使用方法实例解析
2020/09/05 PHP
js,jQuery 排序的实现代码,网页标签排序的实现,标签排序
2011/04/27 Javascript
jquery的总体架构分析及实现示例详解
2014/11/08 Javascript
javascript十六进制及二进制转化的方法
2015/05/06 Javascript
jQuery随手笔记之常用的jQuery操作DOM事件
2015/11/29 Javascript
深入理解react-router@4.0 使用和源码解析
2017/05/23 Javascript
vue bootstrap小例子一枚
2017/06/09 Javascript
jQuery响应滚动条事件功能示例
2017/10/14 jQuery
详解使用angular框架离线你的应用(pwa指南)
2019/01/31 Javascript
JavaScript变速动画函数封装添加任意多个属性
2019/04/03 Javascript
微信小程序 云开发模糊查询实现解析
2019/09/02 Javascript
django通过ajax发起请求返回JSON格式数据的方法
2015/06/04 Python
Python数据结构之栈、队列的实现代码分享
2017/12/04 Python
Python实现的计算马氏距离算法示例
2018/04/03 Python
Python安装lz4-0.10.1遇到的坑
2018/05/20 Python
不归路系列:Python入门之旅-一定要注意缩进!!!(推荐)
2019/04/16 Python
python 提取文件指定列的方法示例
2019/08/07 Python
图解python全局变量与局部变量相关知识
2019/11/02 Python
pytorch中的自定义数据处理详解
2020/01/06 Python
基于Python组装jmx并调用JMeter实现压力测试
2020/11/03 Python
python实现银行账户系统
2021/02/22 Python
关于webview适配H5上传照片或者视频文件的方法
2020/11/04 HTML / CSS
美国在线奢侈品寄售商店:Luxury Garage Sale
2018/08/19 全球购物
Ancheer官方户外和运动商店:销售电动自行车
2019/08/07 全球购物
.TTL是什么?有什么用处,通常那些工具会用到它?(ping? traceroute? ifconfig? netstat?)
2016/05/09 面试题
骨干教师培训制度
2014/01/13 职场文书
大专生自我评价
2014/01/28 职场文书
幼儿园教师国培感言
2014/02/02 职场文书
《再见了,亲人》教学反思
2014/02/26 职场文书
青蓝工程实施方案
2014/03/27 职场文书
我读书我快乐演讲稿
2014/05/07 职场文书
公民授权委托书范本
2014/09/17 职场文书
导游词之湖州-太湖
2019/10/11 职场文书
写一个Python脚本下载哔哩哔哩舞蹈区的所有视频
2021/05/31 Python