I'm having trouble using ng-options with filters.
The problem is that when an option is removed by a filter, the model of the select element retains the value of the removed option.
Here is a plunker. I have two filters working on the ng-options set. One that removes duplicates from the list of options, and one that removes nulls. You can see the problem I am speaking of by following these steps.
- In the "Preferred Email" dropdown, select the last email option, '[email protected]'.
- Delete the text in the "Other Email" input box.
You can see now that because "Other Email" is null, it is no longer an available option, and the dropdown has defaulted to "Please Select Preferred Email". However the model of the select element still has that object assigned to it.
Same problem different context.
- In the "Preferred Email" dropdown, select the option '[email protected]'.
- Now delete the 'z' in "[email protected]"
Upon doing so, the values in the two input boxes ('Email' and 'Home Email') become duplicates, and the second one ('Home Email') becomes filtered out of the available options. However the object that was just filtered remains assigned to the model.
Edit: My solution (Can anyone do better?)
Here (plunker) is the best I could come up with. I'm new to angular and can't help but think there is a better way to do this, I think this solution is "bad" but it works.
Essentially I pass into the filters a reference to the scope (this.contact) along with the name of which default item I am working with ('default_email' or 'default_phone'). If the filter is removing an item from the options set, it checks if it is the default, and if it is, sets the default to undefined.
I also added a bit more code, to get more context as to what I am working towards.
