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