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

Question

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

0，值1

1，值2

2，价值3

3，值4

如果我将 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 可排序插件一样工作，但只能使用 Select-Boxes ... Jquery Sortable

任何人知道如何使用 AngularJS 使其正常工作和正确工作吗？

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

非常感谢！

Answer 1

您可以将selected 键添加到您的列表中以将其绑定到ng-models 以供选择和使用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