javascript - Linked select boxes

Question

I was wondering how can we implement "linked" select boxes with Angular , like if we need to set items appearance order, for example:

So if i change first item's appearance order to 3 it will automatically swap third item' apperance order to 1 , or if i change second item' appearance order to 1 it will swap first' order to 2 , and so on. I don't want items to visually change order, i just want to change their select boxes values respectively.

Answer 1

I was sure that i'll find a solution at SO , but with no luck. So i'll post my solution here , because it is not very trivial , may be it will be useful to someone, or someone will post something more elegant.

View:

<ul ng-controller="Ctrl">
    <li ng-repeat="item in items">        
        <label>
            Item {{$index}}. Order of Appearance:
            <select ng-model="item.order" ng-options="o.order as (o.order+1) for o in items"  ></select> {{item}}
        </label>
    </li>
</ul>

Controller:

function Ctrl( $scope , $filter ){

    $scope.items = [ { order:0 } , {  order:1 }  , { order:2 } ]; // Default order

    for(var i in $scope.items){

        (function( item ) {            // Tricky part , need to use IIFE

            $scope.$watch( function(){ return item; }, function(n,o){

                if(n == o) return;

                var rel = $filter('filter')($scope.items, function( item_for_filtering ){

                            // Filtering previous element with same order

                     return (item_for_filtering.order == n.order && item_for_filtering!= n)

                } )[0];

                if(rel)
                   rel.order = o.order;   // Giving prev element new order 

            },true );

        })( $scope.items[i] );
    }
}

Working Example: http://jsfiddle.net/cherniv/D3zd8/

Answer 2

使用指令对此进行扭曲：

<ol ng-app="app" ng-controller="MainCtrl">
  <li ng-repeat="item in items | orderBy:'position'">
    {{ item.name }}
    <select positoner ng-model="itemPosition" ng-options="p for p in positions()"></select>
  </li>
</ol>

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

app.controller('MainCtrl', function ($scope) {
  $scope.items = [
    { name: 'First', position: 1 },
    { name: 'Second', position: 2 },
    { name: 'Third', position: 3 }
  ];

  $scope.positions = function () {
    var arr = [];

    angular.forEach($scope.items, function (item) {
        arr.push(item.position);
    });

    return arr;
  }
});

app.directive('positoner', function () {
    return {
        link: function (scope, el, attr){
            scope.$watch('itemPosition', function (n, o) {
                if (n === o) return;

                angular.forEach(scope.items, function (item) {
                    if (item.position === n) item.position = o;
                });

                scope.item.position = n;
            });

            scope.$watch('item', function (n, o) {
                scope.itemPosition = scope.item.position;
            }, true);
        }
    }
});