Javascript 使用“角度”从选择框中删除非空选项

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

类型为“首选”、“家庭”、“工作”和“其他”

只有一个电子邮件地址是首选的，所以我想在选择它时从其他两个选择框中删除该选项，如果取消选择，则将其添加回

我用的是角的

有办法做到这一点吗？我猜某种类型的过滤器可以做到这一点，但我对Angular非常陌生，以前从未做过类似的事情

寻找尽可能接近“纯”的角度解

我无法控制数据的存储方式，因此请不要建议其他方案。我还必须按照规范构建UI，所以我不能添加首选复选框——这对我来说更有意义，但就是这样——或者类似的东西

---

提前感谢。

您可以为每个选择设置一个过滤器：

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

更新 已更改，因此仅排除“首选”选项

---

示例

听起来您有一个被迫进入web工作的软件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);
};

在每个select标记上，附加一个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();
            }
    }
};

---

数据绑定应该负责剩下的部分。

这非常接近我所需要的，而且我自己已经完成了一半。我将如何修改它，使其只响应“首选”tho。与任何其他选项一样，可以多次选择。首选项是唯一具有单数限制的项。也很接近。如果选择了“首选”，则会删除所有选项。如果首选框1，则框2和框3应包含家庭、工作和其他信息。如果没有盒子是首选的，那么所有3个盒子都应该是首选的，家庭，工作，其他。你在看这个盒子吗？如果是这样的话，我想我以前没救过它。否则它会那样做吗？哦，是的。它以前没有这样做，但现在是。令人敬畏的酱汁。谢谢你。是的，我想知道零钱的事。我还没试过这样的东西。如果我目前追求的过滤器解决方案失败，这是我的下一个选择。我认为我们的设计师更局限于数据的存储方式。数据库端不做任何事情来确保只首选一个电子邮件地址。它完全依赖于客户。对于DB来说，首选项只是另一种类型，如家庭、工作等。不确定他们为什么不认为有家是首选项或工作是首选项可能有用——一个标志。但是，嘿，除了交易，我无能为力。

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