Question

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

类型是＆＃39;首选＆＃39;，＆＃39;首页＆＃39;＆＃39;工作＆＃39;和＆＃39;其他＆＃39;

只有一个电子邮件地址可供选择，因此我想在选择时从其他2个选择框中删除该选项，如果取消选择则将其添加回来。

我正在使用Angular。

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

寻找接近纯粹的＆＃34;我可以获得角度解决方案。

我无法控制数据的存储方式，因此请不要建议替代方案。我还必须根据规范构建UI，因此我无法添加首选复选框 - 这对我来说使得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-change事件：

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

数据绑定应该处理其余部分。

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

2 个答案: