从带有角的选择框中删除非空选项

Question

I have a form which has 3 email addresses, and 3 corresponding dropdowns, for email type.

The types are 'Preferred', 'Home', 'Work' and 'Other'

Only one email address can be preferred, so I want to remove that option from the other 2 select boxes when it is selected, and add it back if it is deselected.

I am using Angular.

Is there a way to do this? I'm guessing a filter of some sort could do it, but I'm pretty new to Angular and have never done anything like this before.

Looking for as close to a "pure" Angular solution as I can get.

I don't have control over how the data is stored, so please refrain from suggesting an alternate scheme. I also have to build the UI to spec, so I can't add a preferred checkbox - which to me makes WAY more sense, but there it is- or anything like that.

Thanks in advance.

Answer 1

You can have a filter for each select:

<select ng-model='first' ng-options='email as email for email in emails | filter:filterFirst'></select>
<select ng-model='second' ng-options='email as email for email in emails | filter: filterSecond'></select>
<select ng-model='third' ng-options='email as email for email in emails | filter: filterThird'></select>

Filters:

 $scope.filterFirst = function(value){
   return isPreferred(value, $scope.second, $scope.third);
 }

 $scope.filterSecond = function(value){
   return isPreferred(value, $scope.first, $scope.third);
 }

 $scope.filterThird = function(value){
   return isPreferred(value, $scope.second, $scope.first);
 }

 function isPreferred(target, other1, other2){
   var preferred = "Preferred";
   if(target !== preferred) return true;
   if(other1 ===preferred) return false;
   if(other2 === preferred) return false;
   return true;
 }   

Update Changed so only the "Preferred" options is excluded.

example http://plnkr.co/edit/RJuMMosFRQslsk0iifI7?p=preview

Answer 2

It sounds like you have a software UI designer that was forced into web work. It's a difficult change for them, and it results in very poor specs like what you have to deal with. Please accept my condolences. That being said, let's try to solve this.

You'll need a way to set/reset the values of the dropdowns:

$scope.resetEmailTypes = function(){
    var EmailTypes = ['Home', 'Work', 'Other', 'Preferred'];
    $scope.emailType1 = angular.copy(EmailTypes);
    $scope.emailType2 = angular.copy(EmailTypes);
    $scope.emailType3 = angular.copy(EmailTypes);
};

On each select tag, attach an ng-change event calling a function similar to this:

$scope.setPreferred = function(emailID){
    switch(emailID){
        case 1:
            if($scope.selectedEmailType1 === 'Preferred'){
                $scope.emailType2.pop();
                $scope.emailType3.pop();
            } else {
                $scope.resetEmailTypes();
            }
        case 2:
            if($scope.selectedEmailType2 === 'Preferred'){
                $scope.emailType1.pop();
                $scope.emailType3.pop();
            } else {
                $scope.resetEmailTypes();
            }
        default:
            if($scope.selectedEmailType3 === 'Preferred'){
                $scope.emailType1.pop();
                $scope.emailType2.pop();
            } else {
                $scope.resetEmailTypes();
            }
    }
};

Data binding should take care of the rest.