Franco Manzur Franco Manzur - 2 months ago 6
AngularJS Question

angularjs - filter selected option from being select again in the options of a select component

i got 3 select(html) components and the options are fill by the same API. What i need is when that when i select for example USA in the component A, in the component B i shouldn't be able to select it again, it could be disabled or being filter.
What should i do?

<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

Create filter

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

Then apply to each select

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