Как я могу анимировать сортировку списка с помощью orderBy с помощью ng-repeat с ng-animate?
Я orderBy список объектов, используя ng-repeat с фильтром orderBy следующим образом:
- Как перебирать ключи и значения с помощью ng-repeat в AngularJS?
- AngularJS: фильтр ng-repeat, когда значение больше, чем
- AngularJS: список ng-repeat не обновляется, когда элемент модели сплайсируется из массива модели
- Угловой фильтр точно по объектной клавише
- Способ ng-повторить определенное количество раз вместо повторения по массиву?
Мои попытки изменить вид сортировки списка оказались разочаровывающими и не заслуживают внимания. Я видел пример приложения Yearofmoo здесь .
К сожалению, эта демонстрация не совсем то, чего я пытаюсь достичь. Мне нужно анимировать позицию X данного элемента списка, когда он помещается в новый порядок после orderBy определения orderBy . Я попытался выполнить это с помощью css-переходов и абсолютного позиционирования, но ng-repeat похоже, воссоздает элементы списка на orderBy делая анимацию реальной проблемой.
- Возможно ли это с помощью
ng-repeat | orderByng-repeat | orderBy(с или безng-animate)? - Можете ли вы предложить подход или привести пример?
- Директива изолирует область с областью ng-repeat в AngularJS
- Группа AngularJS по директиве без внешних зависимостей
- AngularJS для цикла с числами и диапазонами
- Угловая ng-repeat добавляет бутстрап-строку каждые 3 или 4 столбца
- Как выделить выделенную строку в ngRepeat?
- Как получить предыдущий элемент в ng-repeat?
- прохождение 2 $ индексных значений внутри вложенного ng-repeat
- Угловой порядок. Сортировка числа в тексте в ng-repeat.
Итак, даже если @Alex Osborn показал способ делать то, что вы хотите в комментариях, вот моя попытка:
angular.module('StackApp', []).controller('MainCtrl', function($scope) { 'use strict'; $scope.reverse = 'false'; $scope.myList = [{ id: 0, text: 'HTML5 Boilerplate' }, { id: 1, text: 'AngularJS' }, { id: 2, text: 'Karma' }, { id: 3, text: 'Hello' }, { id: 4, text: 'World' }, { id: 5, text: 'How' }, { id: 6, text: 'Are' }, { id: 7, text: 'You' }, { id: 8, text: '?' }, { id: 9, text: 'I' }, { id: 10, text: 'write' }, { id: 11, text: 'more' }, { id: 12, text: 'to' }, { id: 13, text: 'make' }, { id: 14, text: 'the' }, { id: 15, text: 'list' }, { id: 16, text: 'longer' }]; $scope.$watch('reverse', function() { $scope.setOrder(); }); $scope.setOrder = function() { if ($scope.reverse === 'random') { var t = []; for (var i = 0; i < $scope.myList.length; i++) { var r = Math.floor(Math.random() * $scope.myList.length); while (inArray(t, r)) { r = Math.floor(Math.random() * $scope.myList.length); } t.push(r); $scope.myList[i].order = r; } } else { for (var i = 0; i < $scope.myList.length; i++) { if ($scope.reverse === 'false') { $scope.myList[i].order = i; } else { $scope.myList[i].order = ($scope.myList.length - 1 - i); } } } }; function inArray(a, value) { for (var i = 0; i < a.length; i++) { if (a[i] === value) { return true; } } return false; } });
#list { /* Needed, otherwise items would be at top of the page (see below) */ position: absolute; /* full width, or it would look strange */ width: 100%; } #list li { position: absolute; /* Top: 0; this will be changed for every single list item by AngularJS */ top: 0; /* Item height; hold this in sync with template file */ height: 40px; /* Simple transition */ -webkit-transition: top 0.5s ease-in-out; -moz-transition: top 0.5s ease-in-out; transition: top 0.5s ease-in-out; }
Animate Order
- {{$index}} - {{item.order}}. {{item.text}}
Я расширил ответ AndreM96, чтобы отобразить список в виде сетки.
angular.module('StackApp', []).config(function($routeProvider) { 'use strict'; $routeProvider .when('/', { template: 'Animate Order
' + '' + '' + '
' + '' + '- {{$index}} - {{item.order}}. {{item.text}}
' + '
', controller: 'MainCtrl' }) .otherwise({ redirectTo: '/' }); }); angular.module('StackApp').controller('MainCtrl', function($scope) { 'use strict'; $scope.order = 'false'; $scope.myList = [{ id: 0, text: 'HTML5 Boilerplate' }, { id: 1, text: 'AngularJS' }, { id: 2, text: 'Karma' }, { id: 3, text: 'Hello' }, { id: 4, text: 'World' }, { id: 5, text: 'How' }, { id: 6, text: 'Are' }, { id: 7, text: 'You' }, { id: 8, text: '?' }, { id: 9, text: 'I' }, { id: 10, text: 'write' }, { id: 11, text: 'more' }, { id: 12, text: 'to' }, { id: 13, text: 'make' }, { id: 14, text: 'the' }, { id: 15, text: 'list' }, { id: 16, text: 'longer' } ]; $scope.$watch('order', function() { $scope.setOrder(); }); $scope.setOrder = function() { var i; if ($scope.order === 'random') { var t = []; for (i = 0; i < $scope.myList.length; i++) { var r = Math.floor(Math.random() * $scope.myList.length); while (inArray(t, r)) { r = Math.floor(Math.random() * $scope.myList.length); } t.push(r); $scope.myList[i].order = r; } } else if ($scope.order === 'false') { for (i = 0; i < $scope.myList.length; i++) { $scope.myList[i].order = i; } } else { for (i = 0; i < $scope.myList.length; i++) { $scope.myList[i].order = ($scope.myList.length - 1 - i); } } calcGridPosition(); }; function inArray(a, value) { for (var i = 0; i < a.length; i++) { if (a[i] === value) { return true; } } return false; } function calcGridPosition() { for (var i = 0; i < $scope.myList.length; i++) { var item = $scope.myList[i]; // columns, left-to-right, top-to-bottom var columns = 5; item.column = item.order % columns; item.row = Math.floor(item.order / columns); // rows, top-to-bottom, left-to-right // var rows = 3; // item.column = Math.floor(item.order/rows); // item.row = item.order%rows; } } });
#list { position: absolute; width: 100%; list-style-type: none; padding-left: 0; } #list li { position: absolute; height: 70px; width: 70px; background: #ddd; -webkit-transition: all 2.5s ease-in-out; -moz-transition: all 2.5s ease-in-out; transition: all 2.5s ease-in-out; }