javascript - 链接选择框

Question

我想知道如何使用 Angular 实现“链接”选择框，例如我们是否需要设置项目的出现顺序，例如:

因此，如果我将第一个项目的出现顺序更改为 3 ，它会自动将第三个项目的出现顺序交换为 1 ，或者如果我将第二个项目的出现顺序更改为 1 ，它会将第一个项目的出现顺序交换为 2 ，依此类推。我不希望项目在视觉上改变顺序，我只想分别更改它们的选择框值。

Answer 1

我确信我会在 SO 找到解决方案，但没有运气。所以我将在这里发布我的解决方案，因为它不是很琐碎，可能会对某人有用，或者有人会发布更优雅的东西。

查看:

<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] );
    }
}

工作示例:http://jsfiddle.net/cherniv/D3zd8/