Menu acordeon, array?

Iballa · #1 (**permalink**) 13/11/2016, 09:09

Hola, estoy insertando este menú acordeón en una app que estoy haciendo con Ionic Framework. El caso es que no se bien JS pero la estoy haciendo en unas prácticas de un curso, por eso necesito ayuda.

Tengo el siguiente código HTML, CSS Y JS:

https://codepen.io/ionic/pen/uJkCz

O lo copio y pego aquí, es lo mismo:

Código HTML:

Ver original<html ng-app="ionicApp">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>Ionic Accordion</title>
   
    <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
    <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
 
  </head>
 
  <body ng-controller="MyCtrl">
    
    <ion-header-bar class="bar-positive">
      <h1 class="title">Accordion List</h1>
    </ion-header-bar>
 
    <ion-content>
 
      <ion-list>
        <div ng-repeat="group in groups">
          <ion-item class="item-stable"
                    ng-click="toggleGroup(group)"
                    ng-class="{active: isGroupShown(group)}">
              <i class="icon" ng-class="isGroupShown(group) ? 'ion-minus' : 'ion-plus'"></i>
            &nbsp;
            Group {{group.name}}
          </ion-item>
          <ion-item class="item-accordion"
                    ng-repeat="item in group.items"
                    ng-show="isGroupShown(group)">
            {{item}}
          </ion-item>
        </div>
      </ion-list>
 
    </ion-content>
      
  </body>
</html>

Código CSS:

Ver originalbody {
  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;
}

Código Javascript:

Ver originalangular.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;
  };
  
});

Tengo que poner en la lista mis propios grupos y llamarlos como yo quiero, ubicacion, provincia, tipos de casas, lo que sea, con mis propios subgrupos, en vez de grupo 0, grupo 1 etc, como esta ahora y no tengo ni idea como hacerlo.

¿Tengo que hacer un array en el archivo de Js?

¿Cómo puedo poner un array ahí con mis opciones?

Espero que alguien me pueda responder, supongo que hay que saber programacion pero quiero terminar las practicas haciendo bien ese menu.

gracias!!