У меня есть аккордеон на моем приложении 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-й клик. Кажется, что это шаблон, который когда-либо попадал на пару, когда переключатель аккордеона работает правильно, но затем он просто останавливается.
Я использую точный код.
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>
и данные ВСТАВЛЯЮТ аккордеоны...
<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>
Таким образом, группы оказались массивом объектов.
Равенство в isGroupShown()
не всегда возвращает true/false, но иногда undefined и null. Таким образом, ng-класс не активируется должным образом, и переключатель не работает с первого щелчка.
Измените входное значение на нечто более примитивное, что-то вроде int
или string
и ===
будет работать быстрее/точнее.
ng-click
иng-class
.. передаваемое значениеgroupedBooking
должно быть заменено на целое число. и проходящаяdate
сработала. благодарю вас. Передача метки времени вместо массива объектов,groupedBooking
Спасибо!