Angularjs 如何通过使用ng repeat with ng animate为排序列表设置动画？

我使用

ng repeat

和

orderBy

过滤器呈现对象列表，如下所示：

我试图通过动画改变列表的排序，结果证明这是令人沮丧的，不值得分享。我已经看过Yearofmoo示例应用程序

不幸的是，这个演示并不是我想要实现的。在

orderBy

定义更改后，当给定列表项以新顺序放置时，我需要设置其X位置的动画。我曾试图通过css转换和绝对定位来实现这一点，但

ng repeat

似乎重新创建了

orderBy

上的列表项，使动画成为一个真正的挑战

使用

ng repeat | orderBy

（带或不带

ng动画制作

）

你能提出一种方法或提供一个例子吗

---

因此，即使@Alex Osborn在评论中展示了一种方法来做你想做的事情，我的尝试如下：

angular.module（'StackApp'，[]）.controller（'MainCtrl'，function（$scope）{
"严格使用",；
$scope.reverse='false'；
$scope.myList=[{
id:0，
文本：“HTML5样板文件”
}, {
id:1，
文本：“AngularJS”
}, {
id:2，
文字：“因果报应”
}, {
id:3，
短信：“你好”
}, {
id:4，
文字：“世界”
}, {
id:5，
文字：“如何”
}, {
id:6，
文字：“是”
}, {
id:7，
短信：“你很好。”
}, {
id:8，
正文：“？”
}, {
id:9，
文字：“我”
}, {
id:10，
文字：“写”
}, {
id:11，
文字：“更多”
}, {
id:12，
文本：“至”
}, {
id:13，
文字：“制造”
}, {
身份证号码：14，
文字：'the'
}, {
身份证号码：15，
文本：“列表”
}, {
身份证号码：16，
文字：“更长”
}];
$scope.$watch（'reverse'，function（）{
$scope.setOrder（）；
});
$scope.setOrder=函数（）{
如果（$scope.reverse=='random'）{
var t=[]；
对于（变量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、 推（r）；
$scope.myList[i].order=r；
}
}否则{
对于（变量i=0；i<$scope.myList.length；i++）{
如果（$scope.reverse=='false'）{
$scope.myList[i].order=i；
}否则{
$scope.myList[i].order=（$scope.myList.length-1-i）；
}
}
}
};
函数（a，值）{
对于（变量i=0；i
#列表{
/*需要，否则项目将位于页面顶部（见下文）*/
位置：绝对位置；
/*全宽，否则看起来会很奇怪*/
宽度：100%；
}
#李列表{
位置：绝对位置；
/*Top:0；AngularJS将为每个列表项更改此值*/
排名：0；
/*项目高度；与模板文件保持同步*/
高度：40px；
/*简单过渡*/
-webkit过渡：前0.5s易入易出；
-moz过渡：前0.5s缓进缓出；
过渡：前0.5s缓进缓出；
}

设置顺序动画
反向=真






反向=错误






反转=随机（单击下面的按钮再次洗牌）











{{{$index}-{{item.order}。{{item.text}

我对AndreM96的答案进行了扩展，允许将列表显示为网格


angular.module（'StackApp'，[]）.config（函数（$routeProvider）{
"严格使用",；
$routeProvider
。当（“/”{
模板：“设置顺序动画”+
'' +
'' +
“反向

”+
'' +
“正常

”+
'' +
'随机（单击下面的按钮再次洗牌）
'+
'' +
'' +
“

”+
“
”+
“
{{{$index}-{{item.order}.{{item.text}
”+
“
”，
控制器：“MainCtrl”
})
.否则({
重定向到：'/'
});
});
角度。模块（'StackApp'）。控制器（'MainCtrl'，函数（$scope）{
"严格使用",；
$scope.order='false'；
$scope.myList=[{
id:0，
文本：“HTML5样板文件”
},
{
id:1，
文本：“AngularJS”
},
{
id:2，
文字：“因果报应”
},
{
id:3，
短信：“你好”
},
{
id:4，
文字：“世界”
},
{
id:5，
文字：“如何”
},
{
id:6，
文字：“是”
},
{
id:7，
短信：“你很好。”
},
{
id:8，
正文：“？”
},
{
id:9，
文字：“我”
},
{
id:10，
文字：“写”
},
{
id:11，
文字：“更多”
},
{
id:12，
文本：“至”
},
{
id:13，
文字：“制造”
},
{
身份证号码：14，
文字：'the'
},
{
身份证号码：15，
文本：“列表”
},
{
身份证号码：16，
文字：“更长”
}
];
$scope.$watch（'order'，function（））{
$scope.setOrder（）；
});
$scope.setOrder=函数（）{
var i；
如果（$scope.order=='random'）{
var t=[]；
对于（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、 推（r）；
$scope.myList[i].order=r；
}
}否则，范围为（$）。