My code includes the following HTML:
<select ng-options="mark.id as mark.name for mark in marks" ng-model="markSearch.mark.id">
<option value="">-- Choose mark --</option>
</select>
...
<tr ng-repeat-start="pipeType in pipeTypes | filter:markSearch">
I am trying to implement a filter for my pipeType objects based on the selected option for the mark. Each pipeType object contains a mark object with id and name fields. I want the ability to reset the filter when users select "-- Choose mark --". However, when this option is selected, none of the pipeType objects are visible. I need all objects to be displayed in this scenario. What adjustments should I make to my code?
Edit: Check out this plunk.
Edit 2: I've applied Matho's solution and it works successfully. If you're curious about why it works, a brief explanation extracted from a comment on this answer might provide some clarity.
With each element in the array, Angular calls the comparator function with "markSearch" as expected and the element as "actual". By specifying that if "markSearch" is empty, match ALL elements (return true), or else perform a 'strict' object comparison, we can achieve the desired filtering behavior.