My ng-repeat code looks like this:
<div layout="row" flex layout-wrap layout-margin layout-padding>
<tile ng-repeat="camp in ctrl.camps | filter:{ctrl.search} track by $index"></tile>
</div>
The ctrl.camps object array is structured as follows:
{
"id": 1,
"name": "Hey!",
"kind": "Something",
"variation": {
"type": "Smarty",
"color": "Blue",
}
},
{
"id": 2,
"name": "More Heys!",
"kind": "Another thing",
"variation": {
"type": "Smarty",
"color": "Green",
}
},
{
"id": 3,
"name": "Hey!",
"kind": "my kind",
"variation": {
"type": "Smarty"
}// This one doesn't have a color!
}
Note that the entry with id: 3 does not have a variation color.
I have set up an md-select for filtering, shown below:
<md-input-container>
<label>Variation color</label>
<md-select ng-model="ctrl.search.variation.color">
<md-option ng-click="!null">Empty option</md-option> //I want to be able to clear this selection with the ng-click.. Not sure how.
<md-option ng-repeat="color in ctrl.colors" value="{{color}}">{{color}}</md-option>
</md-select>
</md-input-container>
Although the filtering works well, there is an issue when trying to clear the filter using the empty option. The variation without a color does not reappear after selecting the empty option. Does anyone know how to fix this so that all objects are displayed again upon clearing with the ng-click? Thank you.