Angularjs多选下拉列表

Question

我有几个下拉菜单，需要从其他下拉菜单中排除所有选定的值

    <div ng-app="myApp" ng-controller="myCtrl">

<select ng-model="selectedColor1" ng-options="x.name for x in colors | filter : myExpression1">
        <option style="display:none" value="">select a type</option>
</select>
<br>
<br>
<select ng-model="selectedColor2" ng-options="x.name for x in colors| filter : myExpression2">
        <option style="display:none" value="">select a type</option>
</select>
<br>
<br>
<select ng-model="selectedColor3" ng-options="x.name for x in colors| filter : myExpression3">
    <option style="display:none" value="">select a type</option>
    </select>
</div>

和控制器

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.colors = [{
        id:1,
        name:"green"
    },
    {
        id:2,
        name:"blue"
    },
    {
        id:3,
        name:"Red"
    },
    {
        id:4,
        name:"Orange"
    }
    ];


$scope.myExpression1= function(name) {
  return name !== $scope.selectedColor2 && name !== $scope.selectedColor3;
};

$scope.myExpression2= function(name) {
  return name !== $scope.selectedColor1 && name !== $scope.selectedColor3;
};

$scope.myExpression3= function(name) {
  return name !== $scope.selectedColor1 && name !== $scope.selectedColor2;
};

});

到目前为止，它仍然可以正常工作，但是我想知道是否可以使用组件来完成此操作，因为存在一些代码重复，如果我们决定添加更多下拉列表，它将变得混乱。

  

根据开发人员指南，组件只能控制自己的视图和数据

谢谢！