CODEWITHSUNDEEP
javascriptangularjsasynchronousionic-frameworkaccordion
Shotbyabel
Shotbyabel

Reputation: 373

Toggle function for Ionic Accordion breaks. Does not expand 2nd accordion.(too much data being passed?)

I have an accordion on my Ionic app and we have used the universal code for it that's available from Ionic's Codepen. The most complex aspects of the accordion works but I think that maybe this could be an asynchronous issue?

Perhaps the toggle function does not catch it self up by the time we are closing and opening the other accordions? Since we are passing a lot of data through them. For Example we have the following dates being parsed and ordered by custom filters..

service.js

  // adds groupByDateCode to the bookings.//
  // take the driver_departing_time of each booking and transform it into a {date object} 
  // take the date year and date month and date day and add them up together to form a code.

  function setBookingGroupDate(bookings) {
    //*2*Go through each booking
    for (var i = bookings.length - 1; i >= 0; i--) {

      var arr = bookings[i].driver_departing_time.split(/[- :]/);
      var date = new Date(arr[0], arr[1]-1, arr[2], arr[3], arr[4], arr[5]);
      var dateWithoutHour = new Date(date.getFullYear(), date.getMonth(), date.getDate()); //*4* create same date but w/o the hr to minimize the differences
      var dateCode = dateWithoutHour.getTime(); //Get timeStamps to have same filed for all and same type to be able to order and GROUP
      bookings[i].groupByDateCode = dateCode; //add it back to respective booking[index]
    };

    //Return the bookings
    return bookings;
  }

custom filter in side controller.js

.filter('customDateFilter', function() {
  return function(input) {
    var months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'Novemeber', 'December'];
    var weekdays = ['SUNDAY', 'MONDAY', 'TUESDAY', 'WEDNESDAY', 'THURSDAY', 'FRIDAY', 'SATURDAY'];

    var dateArray = input.split(/[- :]/);
    var inputDate = new Date(dateArray[0], dateArray[1]-1, dateArray[2], dateArray[3], dateArray[4], dateArray[5]);

// SHOW "Today" on today's date instead of actual date O_o
    var showToday = new Date();

    if( inputDate.getDate() === showToday.getDate()
      && inputDate.getMonth() === showToday.getMonth()
      && inputDate.getFullYear() === showToday.getFullYear()){
      return "TODAY";
    } ////'Today if ends'

    return weekdays[inputDate.getDay()] + ", " + months[inputDate.getMonth()] + ", " + inputDate.getDate();   
  };
})

Ok so this is the code that's being run to show our dates the way we want them to display and to order the contents inside the accordions in the proper order.(bookings).. That being said the toggle function that was provided by ionic codepen does work BUT.

I click on A and it expands.. I then when I click on B, A closes but B does not expand like the code shows it should.. I am also console login these actions and the clicking logs but the accordion stops expanding after the 3rd click. This seems to be a pattern ever couple clicks the accordion toggle runs correct but then it just stops.

Ionic Accordion -CodePen

I am using the same exact code..

controller.js

$scope.toggleGroup = function(group) {
  if ($scope.isGroupShown(group)) {
    $scope.shownGroup = null;
  } else {
    $scope.shownGroup = group;
  }
};
$scope.isGroupShown = function(group) {
  return $scope.shownGroup === group;
};

view.html

<ion-list>
  <ion-item ng-repeat="groupedBooking in bookings | orderBy: 'groupByDateCode' | groupBy: 'groupByDateCode'"> <!-- bookingService.js line 15 -23 -->
    <ion-item class="item-stable"
      ng-click="toggleGroup(groupedBooking)"
      ng-class="{active: isGroupShown(groupedBooking)}">
      <i class="today-icon-sytles"
         ng-class="isGroupShown(groupedBooking) ? 'ion-ios-minus' : 'ion-ios-plus'">
      </i>
      &nbsp;

and the data INSIDE the accordions...

 <ion-item class="item-accordion item-avatar items-bg"
                ng-repeat="booking in groupedBooking"
                ng-show="isGroupShown(groupedBooking)">



     <img id="{{$index}}" value="{{booking.details.customers[0].first_name}} {{booking.details.customers[0].last_name}}"
         class="icon-man" src="img/icon-man-div.png" alt="" ng-click="tripInfo(booking)" />

        <div class="passenger-info">
          <h4 class="passenger-name">
            {{booking.details.customers[0].first_name}} {{booking.details.customers[0].last_name}}
          </h4>
          <p class="passenger-details">
            <b>
              TIME:
            </b>{{booking.driver_departing_time}}</br>
            <b>
              PICKUP:
            </b>{{booking.departing_address}}</br>
            <b>
              DEST:
            </b>{{booking.arrival_address }}</br>
            <b>
              CAR:
            </b>{{booking.details.cars[0].brand}} {{booking.details.cars[0].model}}
          </p>
        </div>
      </ion-item>
    </ion-list>

  <ion-list>
    <ion-item class="item-divider">
      <span am-time-ago="message.time"></span>
    </ion-item>

Upvotes: 0

Views: 1507

Answers (1)

Jad Salhani
Jad Salhani

Reputation: 490

So the groups turned out to be an array of Objects.

The equality in isGroupShown() doesn't always return true/false, but sometimes undefined and null. Thus, the ng-class coulnd't activate properly and the toggle wasn't working from the first click.

Change the input value to something more of a primitive type, something like int or string and the === will work faster/more precisely.

Upvotes: 1

Related Questions