There are N "select" components generated based on JSON data, with the "options" populated by an external API. I am trying to implement a custom filter that ensures when an option is selected in one "select" component, it should not appear in the other components. However, I have been unsuccessful so far.
.filter('exclude',function(lodash) {
//@param itemsArray: array of items
//which fills the options of the select component.
//@param selectedItem: the selected <option>
//from one of the <select> components.
return function(itemsArray, selectedItem) {
var output = itemsArray,
filteredItemsArray = [];
if(selectedItem) {
var idx = lodash.findKey(itemsArray, { name: selectedItem.name });
filteredItemsArray.push(selectedItem[idx]);
output.splice(idx, 1);
}
return output;
}
});
This is the intended behavior in the HTML:
<select ng-option="p in publi track by $index | exclude: pSelect[$Index])" ng-model="pSelect[$Index]">
<option val="usa" selected>USA</option>
<option val="arg">Argentina</option>
<option val="col">Colombia</option>
<option val="cnd">Canada</option>
<select>
<select ng-option="p in publi track by $index | exclude: pSelect[$Index])" ng-model="pSelect[$Index]">
<option val="arg" selected>Argentina</option>
<option val="col">Colombia</option>
<option val="cnd">Canada</option>
<select>
<select ng-option="p in publi track by $index | exclude: pSelect[$Index])" ng-model="pSelect[$Index]">
<option val="col" selected>Colombia</option>
<option val="cnd">Canada</option>
<select>
I attempted this approach, but it only removes the item from the array without selecting it. What should I do?