[转]ionic Accordion list three levels-白红宇

[转]ionic Accordion list three levels

阅读量：4593 次

发布时间：2019-06-09

本文共 3395 字，大约阅读时间需要 11 分钟。

简化后的主要代码：

$scope.groups = [];        for (var i = 0; i < 2; i++) {            $scope.groups[i] = {                name: i,                items: []            };            for (var j = 0; j < 3; j++) {                var item = { name: i + '-' + j, items: [] };                for (var k = 0; k < 3; k++) {                    item.items.push({ name: 'kkk' + k });                }                $scope.groups[i].items.push(item);            }        }        $scope.toggleGroup = function (group) {            if ($scope.isGroupShown(group)) {                $scope.shownGroup = null;                $scope.shown2 = null;            } else {                $scope.shownGroup = group;            }        };        $scope.isGroupShown = function (group) {            return $scope.shownGroup === group;        };        $scope.isGroupShown2 = function (group) {            return $scope.shown2 === group;        };        $scope.max = function (group) {            if ($scope.isGroupShown2(group)) {                $scope.shown2 = null;            } else {                $scope.shown2 = group;            }        };


                     
                          
                               
                                                         Group {
    {group.name}}                    
                           
                               
                                    
                                     {
    {item.name}}                        
                                
                                    
         
                                          {
    {subitem.name}}

本文转自：

      
         
         Ionic Accordion       
                     
           
      Accordion List
    
         
           
              
                 
                      
                                  Group {
    {group.name}}          
                  
                  
                     
                      {
    {item.subId}}          
                   
         
                      Example1
          
            Example2

angular.module('ionicApp', ['ionic']).controller('MyCtrl', function($scope) {  $scope.groups = [];  for (var i=0; i<10; i++) {    $scope.groups[i] = {      name: i,      items: []    };    for (var j=0; j<3; j++) {      $scope.groups[i].items.push(i + '-' + j);    }  }    /*   * if given group is the selected group, deselect it   * else, select the given group   */  $scope.toggleGroup = function(group) {    if ($scope.isGroupShown(group)) {      $scope.shownGroup = null;    } else {      $scope.shownGroup = group;    }  };  $scope.isGroupShown = function(group) {    return $scope.shownGroup === group;  };  });

body {
     cursor: url('http://ionicframework.com/img/finger.png'), auto;}/* * http://docs.angularjs.org/api/ng/directive/ngShow#usage_animations */.list .item.item-accordion {
     line-height: 38px;  padding-top: 0;  padding-bottom: 0;  transition: 0.09s all linear;}.list .item.item-accordion.ng-hide {
     line-height: 0px;}.list .item.item-accordion.ng-hide-add,.list .item.item-accordion.ng-hide-remove {
     display: block !important;}

转载于:https://www.cnblogs.com/freeliver54/p/5219329.html

你可能感兴趣的文章

Python mysql 创建连接

查看>>

企业化的性能测试简述---如何设计性能测试方案

查看>>

centos7 安装中文编码

查看>>

POJ - 3683 Priest John's Busiest Day

查看>>

正则表达式start(),end(),group()方法

查看>>