Функция переключения для ионных баянов. Не расширяет 2-й аккордеон (слишком много данных передается?)

0

У меня есть аккордеон на моем приложении Ionic, и мы использовали универсальный код для него, доступный от Ionic Codepen. Самые сложные аспекты аккордеона работают, но я думаю, что, возможно, это может быть асинхронная проблема?

Возможно, функция переключения не догоняет ее до того момента, когда мы закрываем и открываем другие аккордеоны? Поскольку мы передаем через них много данных. Для примера мы имеем следующие даты, которые обрабатываются и упорядочиваются пользовательскими фильтрами.

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;
  } 

настраиваемый фильтр в 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 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();   
  };
})

Хорошо, так что это код, который запускается, чтобы показать наши даты так, как мы хотим, чтобы они отображались и заказывали содержимое внутри аккордеонов в правильном порядке (заказы). Говорят, что функция переключения, предоставляемая ионным кодепом делает работу НО.

Я нажимаю на A, и он расширяется. Я тогда, когда я нажимаю на B, закрывается, но B не расширяется, как показывает код, он должен... Я также консольный вход в эти действия и клики, но аккордеон перестает расширяться после 3-й клик. Кажется, что это шаблон, который когда-либо попадал на пару, когда переключатель аккордеона работает правильно, но затем он просто останавливается.

Ионный аккордеон -CodePen

Я использую точный код.

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;

и данные ВСТАВЛЯЮТ аккордеоны...

 <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>
Теги:
ionic-framework
asynchronous
accordion

1 ответ

1
Лучший ответ

Таким образом, группы оказались массивом объектов.

Равенство в isGroupShown() не всегда возвращает true/false, но иногда undefined и null. Таким образом, ng-класс не активируется должным образом, и переключатель не работает с первого щелчка.

Измените входное значение на нечто более примитивное, что-то вроде int или string и === будет работать быстрее/точнее.

  • 0
    на ng-click и ng-class .. передаваемое значение groupedBooking должно быть заменено на целое число. и проходящая date сработала. благодарю вас. Передача метки времени вместо массива объектов, groupedBooking Спасибо!

Ещё вопросы

Сообщество Overcoder
Наверх
Меню