从角度选择框中删除非空选项

Question

我有一个表单，其中有3个电子邮件地址和3个相应的下拉列表，用于电子邮件类型。

的类型是“优选”，“家庭”，“工作”和“其他”

只有一个电子邮件地址，可以首选，所以我要当它是与其他2个选择框以删除选项选中，如果取消选中，则将其添加回来。

我正在使用Angular。

有没有办法做到这一点？我猜测某种过滤器可以做到这一点，但我对Angular来说很新颖，以前从未做过这样的事情。

寻找尽可能接近“纯”的角度解决方案，因为我可以得到。

我无法控制数据的存储方式，因此请避免建议备用方案。我也必须建立规范的用户界面，所以我不能添加首选复选框 - 这对我来说使WAY更有意义，但它存在 - 或者类似的东西。

在此先感谢。

Answer 1

你可以有一个过滤器对每个选择：

<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> 

过滤器：

$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; 
} 

更新 更改，因此才有了 “首选” 选项被排除在外。

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

Answer 2

这听起来像你有被迫的网络工作的软件UI设计。这对他们来说是一个艰难的改变，并且会导致非常糟糕的规格，例如您必须处理的内容。请接受我的吊。。这就是说，让我们试着解决这个问题。

你需要一种方法来设置/复位的下拉列表中的值：

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

在每个选择标签，附加一个NG-改变事件调用类似这样的功能：

$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(); 
      } 
    } 
}; 

数据绑定应该照顾其余的。