mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
ba1859b308
Closes #1601. BREAKING CHANGE: Reordering with ion-reorder-button no longer changes the order of the items in the DOM. This change will only break your list if you were not using the onReorder callback as described in the documentation. Before, while reordering an element in a list Ionic would swap the elements underneath as the reordering happened. This sometimes caused errors with angular's ngRepeat directive. Now, reordering an element in a list does not change the order of elements in the DOM. It is expected that the end developer will use the index changes given in the `onReorder` callback to reorder the items in the list. This is simple to do, see the [examples in the ionReorderButton documentation](http://ionicframework.com/docs/api/directive/ionReorderButton/).
81 lines
2.6 KiB
JavaScript
81 lines
2.6 KiB
JavaScript
var ITEM_TPL_REORDER_BUTTON =
|
|
'<div data-prevent-scroll="true" class="item-right-edit item-reorder ng-hide">' +
|
|
'</div>';
|
|
|
|
/**
|
|
* @ngdoc directive
|
|
* @name ionReorderButton
|
|
* @parent ionic.directive:ionItem
|
|
* @module ionic
|
|
* @restrict E
|
|
* Creates a reorder button inside a list item, that is visible when the
|
|
* {@link ionic.directive:ionList ionList parent's} `show-reorder` evaluates to true or
|
|
* `$ionicListDelegate.showReorder(true)` is called.
|
|
*
|
|
* Can be dragged to reorder items in the list. Takes any ionicon class.
|
|
*
|
|
* Note: Reordering works best when used with `ng-repeat`. Be sure that all `ion-item` children of an `ion-list` are part of the same `ng-repeat` expression.
|
|
*
|
|
* When an item reorder is complete, the expression given in the `on-reorder` attribute is called. The `on-reorder` expression is given two locals that can be used: `$fromIndex` and `$toIndex`. See below for an example.
|
|
*
|
|
* Look at {@link ionic.directive:ionList} for more examples.
|
|
*
|
|
* @usage
|
|
*
|
|
* ```html
|
|
* <ion-list ng-controller="MyCtrl">
|
|
* <ion-item ng-repeat="item in items">
|
|
* Item {{item}}
|
|
* <ion-reorder-button class="ion-navicon"
|
|
* on-reorder="moveItem(item, $fromIndex, $toIndex)">
|
|
* </ion-reorder>
|
|
* </ion-item>
|
|
* </ion-list>
|
|
* ```
|
|
* ```js
|
|
* function MyCtrl($scope) {
|
|
* $scope.items = [1, 2, 3, 4];
|
|
* $scope.moveItem = function(item, fromIndex, toIndex) {
|
|
* //Move the item in the array
|
|
* $scope.items.splice(fromIndex, 1);
|
|
* $scope.items.splice(toIndex, 0, item);
|
|
* };
|
|
* }
|
|
* ```
|
|
*
|
|
* @param {expression=} on-reorder Expression to call when an item is reordered.
|
|
* Parameters given: $fromIndex, $toIndex.
|
|
*/
|
|
IonicModule
|
|
.directive('ionReorderButton', ['$animate', '$parse', function($animate, $parse) {
|
|
return {
|
|
restrict: 'E',
|
|
require: ['^ionItem', '^?ionList'],
|
|
priority: Number.MAX_VALUE,
|
|
compile: function($element, $attr) {
|
|
$attr.$set('class', ($attr['class'] || '') + ' button icon button-icon', true);
|
|
$element[0].setAttribute('data-prevent-scroll', true);
|
|
return function($scope, $element, $attr, ctrls) {
|
|
var itemCtrl = ctrls[0];
|
|
var listCtrl = ctrls[1];
|
|
var onReorderFn = $parse($attr.onReorder);
|
|
|
|
$scope.$onReorder = function(oldIndex, newIndex) {
|
|
onReorderFn($scope, {
|
|
$fromIndex: oldIndex,
|
|
$toIndex: newIndex
|
|
});
|
|
};
|
|
|
|
var container = jqLite(ITEM_TPL_REORDER_BUTTON);
|
|
container.append($element);
|
|
itemCtrl.$element.append(container).addClass('item-right-editable');
|
|
|
|
if (listCtrl && listCtrl.showReorder()) {
|
|
$animate.removeClass(container, 'ng-hide');
|
|
}
|
|
};
|
|
}
|
|
};
|
|
}]);
|