2016-09-15 12 views
0

3つの選択(html)コンポーネントがあり、そのオプションは同じAPIで満たされます。私が必要とするのは、コンポーネントAで、例えば、米国を選択したときに、コンポーネントBで再び選択できないようにする必要があるときです。無効にするか、フィルターにすることができます。 どうすればいいですか?angularjs - 選択されたオプションが選択コンポーネントのオプションで再度選択されないようにフィルタを適用します。

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

答えて

0

各選択

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> 
関連する問題