javascript - 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 可排序插件一样工作，但只能与选择框一起使用...... Jquery Sortable

有人知道如何使用 AngularJS 使其正常工作吗？

它是 Angular UI 网格(重新排序列)所必需的

非常感谢!

Answer 1

您可以将 selected 键添加到列表中，将其绑定(bind)到 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