PhoneGap中文网

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 7442|回复: 4

ionic list列表下的item可以做折叠吗?需要如何实现?

[复制链接]

4

主题

9

帖子

64

积分

注册会员

Rank: 2

积分
64
发表于 2015-7-22 02:25:19 | 显示全部楼层 |阅读模式
ionic list列表下的item可以做折叠吗?需要如何实现?要从数据库读取数据. item 展开->item下的子菜单->点击 ->另外的一个页面;
it营
回复

使用道具 举报

45

主题

512

帖子

1581

积分

金牌会员

Rank: 6Rank: 6

积分
1581
发表于 2015-7-22 09:07:02 | 显示全部楼层
可以的吧   引入jquery就可以整  或者自己写个
it营
回复 支持 反对

使用道具 举报

4

主题

9

帖子

64

积分

注册会员

Rank: 2

积分
64
 楼主| 发表于 2016-7-13 18:26:07 | 显示全部楼层
写个指令来实现
回复 支持 反对

使用道具 举报

1

主题

5

帖子

39

积分

新手上路

Rank: 1

积分
39
发表于 2017-9-6 10:31:14 | 显示全部楼层
我也有这个需求,麻烦给详细解说一下!感谢!!!
回复 支持 反对

使用道具 举报

0

主题

1

帖子

4

积分

新手上路

Rank: 1

积分
4
发表于 2018-3-15 20:17:25 | 显示全部楼层
找到了,分享给大家WEB-DEMO

html

  1. <html ng-app="ionicApp">
  2.   <head>
  3.     <meta charset="utf-8">
  4.     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  5.     <title>Ionic collapsible list</title>
  6.    
  7.     <link href="//code.ionicframework.com/1.0.0-beta.12/css/ionic.css" rel="stylesheet">
  8.     <script src="//code.ionicframework.com/1.0.0-beta.12/js/ionic.bundle.js"></script>
  9.     </script>
  10.   </head>

  11.   <body ng-controller="MyCtrl">
  12.    
  13.     <ion-header-bar class="bar-positive">
  14.       <h1 class="title">Ionic collapsible list</h1>
  15.     </ion-header-bar>

  16.     <ion-content>

  17.       <ion-list>
  18.         <div ng-repeat="group in groups">
  19.           <ion-item class="item-stable"
  20.                     ng-click="toggleGroup(group)"
  21.                     ng-class="{active: isGroupShown(group)}">
  22.               <i class="icon" ng-class="isGroupShown(group) ? 'ion-minus' : 'ion-plus'"></i>
  23.             
  24.             Group {{group.name}}
  25.           </ion-item>
  26.           <ion-item class="item-accordion"
  27.                     ng-repeat="item in group.items"
  28.                     ng-show="isGroupShown(group)">
  29.             {{item}}
  30.           </ion-item>
  31.         </div>
  32.       </ion-list>

  33.     </ion-content>
  34.       
  35.   </body>
  36. </html>
复制代码


css


  1. .list .item.item-accordion {
  2.   line-height: 38px;
  3.   padding-top: 0;
  4.   padding-bottom: 0;
  5.   transition: 0.09s all linear;
  6. }
  7. .list .item.item-accordion.ng-hide {
  8.   line-height: 0px;
  9. }
  10. .list .item.item-accordion.ng-hide-add,
  11. .list .item.item-accordion.ng-hide-remove {
  12.   display: block !important;
  13. }
复制代码


js

  1. angular.module('ionicApp', ['ionic'])

  2. .controller('MyCtrl', function($scope) {
  3.   $scope.groups = [];
  4.   for (var i=0; i<10; i++) {
  5.     $scope.groups[i] = {
  6.       name: i,
  7.       items: [],
  8.       show: false
  9.     };
  10.     for (var j=0; j<3; j++) {
  11.       $scope.groups[i].items.push(i + '-' + j);
  12.     }
  13.   }
  14.   
  15.   /*
  16.    * if given group is the selected group, deselect it
  17.    * else, select the given group
  18.    */
  19.   $scope.toggleGroup = function(group) {
  20.     group.show = !group.show;
  21.   };
  22.   $scope.isGroupShown = function(group) {
  23.     return group.show;
  24.   };
  25.   
  26. });
复制代码


回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关闭

站长推荐上一条 /1 下一条

Archiver|手机版|小黑屋|PhoneGap中文网 ( 京ICP备13027796号-1

GMT+8, 2018-7-20 04:48 , Processed in 0.382057 second(s), 34 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表