javascript - angularjs-通过更新其他列表条目来更改列表的顺序

我有一个包含3个条目的键/值列表，例如

0，值1

1，值2

2，Value3

3，Value4

如果将2更改为0，则索引为2的条目应滑至位置0，而其他元素则滑至后面的位置。

例如从0-1-2-3开始将是2-0-1-3

的HTML

<div ng-controller="MyCtrl">
  <div class="row-sort" ng-repeat="(key1, value1) in selectList">
    <select class="row-select">
      <option ng-repeat="(key2, value2) in selectList" value={{key2}} ng-selected="key1 == key2">{{key2}}</option>
    </select>
    <span class="row-label">{{value1.name}}</span>
  </div>
</div>

的JavaScript

var myApp = angular.module('myApp', []);

function MyCtrl($scope) {
  $scope.selectList = [{
    idx: 0,
    name: 'Value1'
  }, {
    idx: 1,
    name: 'Value2'
  }, {
    idx: 2,
    name: 'Value3'
  }, {
    idx: 3,
    name: 'Value4'
  }]
}

JS Fiddle Link

编辑1：它的工作类似于jQuery Sortable插件，但仅适用于Select-Boxes ...
Jquery Sortable

任何人都知道如何使用AngularJS使其正常工作并得到纠正吗？

Angular UI Grid（重新排列列）需要它

非常感谢你！

最佳答案

您可以将selected键添加到列表中，以将其绑定到ng-model进行选择并使用orderBy：

$scope.selectList = [{
    idx: 0,
    selected: '0',
    name: 'Value1'
  }, {
    idx: 1,
    selected: '1',
    name: 'Value2'
  }, {
    idx: 2,
    selected: '2',
    name: 'Value3'
  }, {
    idx: 3,
    selected: '3',
    name: 'Value4'
  }];

的HTML

<div class="row-sort" ng-repeat="(key1, value1) in selectList | orderBy : 'selected'">
    <select class="row-select" ng-model="value1.selected">
      <option ng-repeat="(key2, value2) in selectList"
              value={{key2}}>{{key2}}</option>
    </select>
    <span class="row-label">{{value1.name}}</span>
  </div>

编辑

您可以编写观察者并替换项目的职位：

$scope.$watch(function () {
        return $scope.selectList;
    },
   function (newVal, oldVal) {

     var selectedItemId;
     var selected;
      angular.forEach($scope.selectList, function(item){
          if(item.idx !== parseInt(item.selected)){
            selectedItemId = item.idx;
            selected = item.selected;
            }
      });

      angular.forEach($scope.selectList, function(item){
          if(item.selected === selected){
            item.selected = ''+selectedItemId;
            item.idx = selectedItemId;
            selectedItemId = undefined;
            selected = undefined;
            }

            if(item.idx !== parseInt(item.selected)){
              item.idx = parseInt(item.selected);
            }
      });
    },true);

Demo Fiddle 2