angularjs - 他のリストエントリを更新したリストの順序を変更する

Question

私は、3つのエントリを持つキー/バリューリストを持っています。

0、値1

1、値2

2、VALUE3

3、Value4

私は0に2を変更すると、インデックス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

EDIT 1になります：jQueryソート可能なプラグインのように動作しますが、Select-Boxでのみ有効です。 Jquery Sortable

誰でも、AngularJSで正しく機能して正しく動作するかどうか角度UIグリッドに必要な

その（列の順序を変更）

はどうもありがとうございました！

Answer 1

あなたは選択のためのng-model秒にバインドするselectedキーあなたのリストに追加して使用することができます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> 

EDIT

することができますウォッチャーを書いて位置を置き換えるfo Rアイテム：

$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