angularjs - 過濾器選擇選項再次選擇選擇組件的選項

Question

我有3個選擇（html）組件，並且選項由相同的API填充。我需要什麼時，當我選擇例如組件A中的美國，在組件B我不應該能夠再次選擇它，它可以被禁用或過濾。 我該怎麼辦？

<select ng-option="countries in ctrs" ng-model="selectedCtr1"> 
    <option val="usa">USA</option> 
    <option val="arg">Argentina</option> 
    <option val="col">Colombia</option> 
    <option val="cnd">Canada</option> 
<select> 
<select ng-option="countries in ctrs" ng-model="selectedCtr2"> 
    <option val="usa">USA</option> 
    <option val="arg">Argentina</option> 
    <option val="col">Colombia</option> 
    <option val="cnd">Canada</option> 
<select> 
<select ng-option="countries in ctrs" ng-model="selectedCtr3"> 
    <option val="usa">USA</option> 
    <option val="arg">Argentina</option> 
    <option val="col">Colombia</option> 
    <option val="cnd">Canada</option> 
<select> 

Answer 1

創建過濾器

app.filter('exclude',function() 
{ 
    return function(countries, selected1, selected2) 
    { 
    var output = []; 

    for(var i = 0; i < countries.length; i++) 
    { 
     if(countries[i] != selected1 && countries[i] != selected2) 
     { 
      output.push(countries[i]); 
     } 
    } 

    return output; 
    } 
}); 

然後應用到每個選擇

<select ng-option="countries in ctrs | exclude : selectedCtr2 : selectedCtr3)" ng-model="selectedCtr1"> 
    <option val="usa">USA</option> 
    <option val="arg">Argentina</option> 
    <option val="col">Colombia</option> 
    <option val="cnd">Canada</option> 
<select> 
<select ng-option="countries in ctrs | exclude : selectedCtr1 : selectedCtr3)" ng-model="selectedCtr2"> 
    <option val="usa">USA</option> 
    <option val="arg">Argentina</option> 
    <option val="col">Colombia</option> 
    <option val="cnd">Canada</option> 
<select> 
<select ng-option="countries in ctrs | exclude : selectedCtr1 : selectedCtr2)" ng-model="selectedCtr3"> 
    <option val="usa">USA</option> 
    <option val="arg">Argentina</option> 
    <option val="col">Colombia</option> 
    <option val="cnd">Canada</option> 
<select>