Javascript 如何在ng repeat中上下移动项目组

我使用ng repeat以angular js显示ui中的项目，我需要移动 从外部按钮在ng重复表中向上和向下显示项目。 我可以上下移动物品，但还有一个 需要移动项目组的条件示例：

id  reportname comments
1   report1     na
2   report2     test
2   report4     test
3   report3 test
3   report3     na
4   report4     test

我需要将

3,3

的enitre组移动到

2,2

上方，或将整个

2,2

移动到

3,3

下方。

---

有人能告诉我怎么做吗？

我在

ng repeat

请看这个并复习一下

在上面的演示中添加

<input type="button" name="changeOrder" ng-click="changeReportOrder()" value="Change Order">
    <div ng-repeat="report in reports | orderBy:predicate:reverce">{{report.id}} {{report.reportname}} {{report.comments}}</div>

---

在控制器中。点击

订单更改

按钮时，报告的订单更改根据id进行升序/降序。

这是一个完整的工作解决方案，用于一系列实用方法

编辑：重写和重构以适应并非所有id相同的项目都分组在一起的情况。这现在只移动具有相同id的相邻项，而不是数组中具有相同id的所有项

angular.module（'stackoverflow'，[]）.controller（'MainCtrl'，function（$scope）{
$scope.data=[{
id:1，
reportname:'report1'，
评论：“不适用”
}, {
id:2，
reportname:'report2'，
评论：“测试”
}, {
id:2，
reportname:'report4'，
评论：“测试”
}, {
id:3，
reportname:'report3'，
评论：“测试”
}, {
id:3，
reportname:'report3'，
评论：“不适用”
}, {
id:4，
reportname:'report4'，
评论：“测试”
}];
$scope.moveGroup=函数（项，目录）{
dir=标准化edir（dir）；
firstIndexOfGroup
var firstIndexOfGroup=FindFirstIndexOfGroup和SameId（项目）；
var endIndexOfGroup=findEndIndexOfGroup（firstIndexOfGroup，item）；
var itemsInGroup=$scope.data.slice（firstIndexOfGroup，endIndexOfGroup+1）；
var idToSwapWith=（$scope.data[firstIndexOfGroup-1]| |{}）.id；
//如果向下移动，则与第一个条目交换组结束
如果（dir==='down'）{
idToSwapWith=（$scope.data[endIndexOfGroup+1]| |{}）.id；
}
如果（idToSwapWith>0）{
//从当前位置移除
$scope.data.splice（firstIndexOfGroup，ux.size（itemsingGroup））；
//在正确的索引处插入具有相同id的项目组
var firstItemWithPrevIdIndex=u.findIndex（$scope.data，'id'，idToSwapWith）；
如果（dir==='down'）{
firstItemWithPrevIdIndex=u.findLastIndex（$scope.data，'id'，idToSwapWith）+1；
}
var StipeArgs=[firstItemWithPrevIdIndex，0].concat（ItemsGroup）；
$scope.data.splice.apply（$scope.data，splicateargs）；
}
};
$scope.moveItem=函数（项，目录）{
var索引=$scope.data.indexOf（项目）；
if（normalizeDir（dir）==“up”）{
$scope.data.splice（索引-1,2，项，$scope.data[index-1]）；
}否则{
$scope.data.splice（索引，2，$scope.data[index+1]，项）；
}
}
函数规格化EDIR（dir）{
开关（（dir | |“”）.toString（）.toLowerCase（））{
案例“向上”：
案例“u”：
返回“向上”；
}
返回“向下”；
}
函数findFirstIndexWithSameId（项）{
var索引=$scope.data.indexOf（项目）；
对于（变量i=索引-1；i>=0；i--）{
if（$scope.data[i].id！==item.id）{
打破
}否则{
指数=i；
}
}
收益指数；
}
函数findEndIndexOfGroup（startIndexOfGroup，item）{
var指数=集团的StartIndex；
对于（变量i=startIndexOfGroup+1，len=..size（$scope.data）；i
。移动链接btn{
字体大小：较小；
颜色：浅蓝色；
填充物：2px 5px；
}
.移动链接btn:悬停{
文字装饰：下划线；
光标：指针；
}
运输署，
th{
外形：1px固体#cfcfcf；
填充物：2px 5px；
字体系列：无衬线；
}

身份证件
名称
评论
移动命令
{{item.id}
{{item.reportname}
{{item.comments}}
列出
项目记录
分组
分组
这有点不清楚。告诉我们你尝试过什么看看这个答案：你可以将这些元素分组到一个div中，然后用另一个按钮来移动它。你当前的移动代码在哪里？为什么不将其显示为javascript数组而不是制表符分隔的值？你的应用程序无法从这些数据中运行…我们不应该这样做either@pixelbits，我相信这是相同的基本问题。在答案中发布您的代码…而不仅仅是一个指向演示的链接。答案应该是独立的…演示是额外的，可以测试答案中的代码。想象10个答案，没有可见的代码，只有一堆链接。这会使网站对所有用户都不友好感谢你的建议不知道为什么，但很容易让每个组分开other@charlietfl我对它做了一个大的重写，你能打破新版本吗？我打它…踢它…向它扔火。。。。似乎挺得住的！：）我很高兴我用手写体写的。那样的话它是免疫的。
$scope.reports = [
    {id:1,reportname:'report1',comments:'na'},
    {id:2,reportname:'report2',comments:'test'},
    {id:2,reportname:'report4',comments:'test'},
    {id:3,reportname:'report3',comments:'test'},
    {id:3,reportname:'report3',comments:'na'},
    {id:4,reportname:'report4',comments:'test'}
    ];
    $scope.predicate = '-id';
    $scope.changeReportOrder = function(){
      if($scope.predicate == 'id')
        $scope.predicate = '-id';
      else
        $scope.predicate = 'id';
    }