AngularJS过滤器已从动态字段中选择选项

Question

我有一个表单，您可以在其中添加x个字段。每个字段包含选项选择。如果此选项在之前的一个或多个字段中已被选中，我想过滤掉已经选择的选项。每个字段都有一个删除按钮，表单有1个添加按钮。

如何过滤动态字段？ 任何帮助，指导是最受欢迎的。提前感谢。 :)

这是我的HTML看起来像：

<div data-ng-repeat="choice in choices"> 
      <select data-ng-model="choice.option" 
        data-ng-options="item as item.Value for item in options"> 
      </select> 
      <button data-ng-click="removeChoice(choice)">Remove choice</button> 
     <div> 
      <button data-ng-show="choices.length <= 4" data-ng-click="addNewChoice()">Add Choice</button> 
     </div> 
</div> 

---

而且我的控制器：

 $scope.options = [ 
      { 
       "Key": "0", 
       "Value": "Select an option" 
      }, 
      { 
       "Key": "Option1", 
       "Value": "Option1" 
      }, 
      { 
       "Key": "Option2", 
       "Value": "Option2" 
      }, 
      { 
       "Key": "Option3", 
       "Value": "Option3" 
      }, 
      { 
       "Key": "Option4", 
       "Value": "Option4" 
      }, 
      { 
       "Key": "Option5", 
       "Value": "Option5" 
      } 
     ]; 


     $scope.choices = [{ id: '1' }]; 

      $scope.addNewChoice = function() { 
       var newItemNo = $scope.choices.length + 1; 
        $scope.choices.push({ id: newItemNo, option: $scope.option, value: $scope.value }); 
      }; 

      $scope.removeChoice = function() { 
       var index = $scope.choices.indexOf(choice); 
       $scope.choices.splice(index, 1); 
      }; 

---

Answer 1

确定 我可以给简单的建议，这将是这一点。

1：添加变量$ scope.selectedOptions = []; 这将包含所有选择元素中已经选择的选项列表。

2：create function $ scope.AddSelectedOption（item）; 当我们改变任何选择元素的选项时，这将添加所选对象，因为我们将用于所有选择ng-change =“AddSelectedOption（item）;” 3：添加checkIfSelected（item）;添加checkIfSelected（item）;添加checkIfSelected（item）;添加checkIfSelected（item）;添加checkIfSelected（item）;添加checkIfSelected（item）;添加checkIfSelected（item）;这将检查是否给定对象的值已被选中或不..

在

将用户希望你明白它的作用只是检查像这样

$ scope.checkIfSelected =功能（项目）{

$ scope.selectedFound = $ scope.selectedOptions.filter（功能 （选项）{ 如果（option.value == item.value） { 回天; }
}）;
if（$ scope.selectedFound.length == 0）{return false; } else { return true; }

}

如果给的选项中项目这将返回true。 如果没有......你可以邀请我再次帮忙。

Answer 2

这是可能的。我正在解释这个要求的基本版本。请参阅此处的工作示例http://plnkr.co/edit/S9yZpjhY55lXsuifnUAc?p=preview

正在做什么是维护另一个options，它是原始options的副本。复制options将使其不会引用现有选项，因为对象是通过Javascript中的引用传递的。

主要的逻辑是这样的功能，其修改选择options：

$scope.optionSelected = function(choice) { 
    $scope.availableOptions = $scope.availableOptions || angular.copy($scope.options); 

    if (choice.option) { 
     var index = -1; 
     // See if available options has that key 
     angular.forEach($scope.availableOptions, function(item, i) { 
      if (item.Key === choice.option.Key) { 
       index = i; 
      } 
     }); 

     if (index > -1) { 
      // And then remove it 
      $scope.availableOptions.splice(index, 1); 
     } 
    } 
};