javascript - angularjs - Change the order of a list with update of the other list entries -

i have key/value list 3 entries, e.g.

0, value1

1, value2

2, value3

3, value4

if change 2 0, entry index 2 should slip position 0 , additional elements slip around position back.

eg 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: sould work jquery sortable plugin, select-boxes ... jquery sortable

anyone idea how getting work , correct angularjs?

its required angular ui grid (reorder columns)

thank much!

you can add list selected key bind ng-models select , use 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

you can write watcher , replace positions items:

$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