angular.module('StackApp', []).config(function($routeProvider) {
'use strict';
$routeProvider
.when('/', {
template: '<h1>Animate Order</h1>' +
'<form action="">' +
'<input type="radio" value="true" name="order" ng-model="order">' +
'<label for="order">reverse</label><br><br>' +
'<input type="radio" value="false" name="order" ng-model="order">' +
'<label for="order">normal</label><br><br>' +
'<input type="radio" value="random" name="order" ng-model="order">' +
'<label for="order">random (click button below to shuffle again)</label><br>' +
'</form>' +
'<input type="button" ng-click="order = \'random\';setOrder()" value="randomize">' +
'<br><br>' +
'<ul id="list" ng-style="{height: ((myList.length * 90) + \'px\')}">' +
'<li ng-repeat="item in myList" ng-style="{top: ((item.row * 90) + \'px\'), left: ((item.column * 90) + \'px\')}">{{$index}} - {{item.order}}. {{item.text}}</li>' +
'</ul>',
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;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js"></script>
<main ng-app="StackApp">
<div class="container" ng-view></div>
</main>
Tôi đã gặp vấn đề này nhưng chưa có để xây dựng một giải pháp, hoặc tôi sẽ cung cấp một câu trả lời thích hợp với các ví dụ - tuy nhiên giải pháp tôi đã lên kế hoạch là lọc một bản sao của danh sách (ví dụ trong bộ điều khiển), tìm chỉ mục mới của mục, sau đó chuyển động mục đó sang chỉ mục đó. Bạn nói đúng - bộ lọc + ng-lặp lại chỉ cần xây dựng lại danh sách. Những gì bạn thực sự muốn là riêng biệt xác định vị trí từ chế biến các hình ảnh động. –
Tôi sợ rằng có thể là giải pháp - cảm ơn! – Casey
@AlexOsborn Bạn nên gửi câu trả lời đó làm câu trả lời. Nó đã giúp đỡ tôi! –