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 相关文章推荐
对google个性主页的拖拽效果的js的完整注释[转]
Apr 10 Javascript
根据当前时间在jsp页面上显示上午或下午
Aug 18 Javascript
Extjs4.0 ComboBox如何实现三级联动
May 11 Javascript
Bootstrap基本组件学习笔记之进度条(15)
Dec 08 Javascript
ajax实现动态下拉框示例
Jan 10 Javascript
浅谈angular.js跨域post解决方案
Aug 30 Javascript
JavaScript实现精美个性导航栏筋斗云效果
Oct 29 Javascript
微信小程序项目实践之九宫格实现及item跳转功能
Jul 19 Javascript
在vue中使用vue-echarts-v3的实例代码
Sep 13 Javascript
vue v-for出来的列表,点击某个li使得当前被点击的li字体变红操作
Jul 17 Javascript
原生JavaScript实现贪吃蛇游戏
Nov 04 Javascript
vue切换菜单取消未完成接口请求的案例
Nov 13 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
对squid中refresh_pattern的一些理解和建议
2009/04/17 PHP
php操作excel文件 基于phpexcel
2010/07/02 PHP
PHP实现在线阅读PDF文件的方法
2015/06/23 PHP
php下载文件超时时间的设置方法
2016/10/06 PHP
Laravel 关联模型-关联新增和关联更新的方法
2019/10/10 PHP
Javascript实例教程(19) 使用HoTMetal(7)
2006/12/23 Javascript
Prototype Function对象 学习
2009/07/12 Javascript
JavaScript初学者需要了解10个小技巧
2010/08/25 Javascript
jquery实现定时自动轮播特效
2015/12/10 Javascript
Sortable.js拖拽排序使用方法解析
2016/11/04 Javascript
详解js的事件代理(委托)
2016/12/22 Javascript
canvas实现图像截取功能
2017/02/06 Javascript
JS排序之快速排序详解
2017/04/08 Javascript
vue封装第三方插件并发布到npm的方法
2017/09/25 Javascript
vue19 组建 Vue.extend component、组件模版、动态组件 的实例代码
2019/04/04 Javascript
实例详解vue中的$root和$parent
2019/04/29 Javascript
Vue Element UI + OSS实现上传文件功能
2019/07/31 Javascript
Element-Ui组件 NavMenu 导航菜单的具体使用
2019/10/24 Javascript
vue移动端使用appClound拉起支付宝支付的实现方法
2019/11/21 Javascript
[01:02]2014 DOTA2国际邀请赛中国区预选赛 现场抢先看
2014/05/22 DOTA
python if not in 多条件判断代码
2016/09/21 Python
python输入错误密码用户锁定实现方法
2017/11/27 Python
Python File readlines() 使用方法
2018/03/19 Python
Python实现的根据IP地址计算子网掩码位数功能示例
2018/05/23 Python
命令行运行Python脚本时传入参数的三种方式详解
2019/10/11 Python
Pytorch to(device)用法
2020/01/08 Python
python实现excel公式格式化的示例代码
2020/12/23 Python
HTML5 Web缓存和运用程序缓存(cookie,session)
2018/01/11 HTML / CSS
印度在线内衣和时尚目的地:Zivame
2017/09/28 全球购物
Under Armour瑞典官方网站:美国高端运动科技品牌
2018/11/21 全球购物
学年末自我鉴定
2014/01/21 职场文书
公司爱心捐款倡议书
2014/05/14 职场文书
大学生军训自我鉴定范文
2014/09/18 职场文书
解除合同协议书范本
2016/03/21 职场文书
干货:我将这样书写我的演讲稿!
2019/05/09 职场文书
怎样做好公众演讲能力?
2019/08/28 职场文书