链接选择框答案

【问题标题】：Linked select boxes链接选择框
【发布时间】：2013-10-23 09:40:06
【问题描述】：

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

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

【问题讨论】：

标签： javascript angularjs angularjs-directive html-select

【解决方案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>

控制器：

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/

【讨论】：

【解决方案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);
        }
    }
});

【讨论】：