Consider this scenario :
<select class="form-control" name="blah" ng-model="$ctrl.form.blah" ng-options="item.id as item.name group by item.etype | uppercase for item in $ctrl.opts"></select>
My goal is to toggle the display of each GROUP by clicking a corresponding group-button. For instance, I want a button for each group that, when clicked, will hide or show the specific group-options within the select-box.
Is there a way to achieve this functionality?
I managed to implement it using Yatrix's filter method and passing the component controller as an argument. This enables me to access the necessary variables to determine which options to filter.
The only issue now is that I can no longer utilize the line:
ctrl.form.select_box = ctrl.opts[0].id
Is there a workaround to set the default option given this constraint?
This is the final approach I adopted :
<select class="form-control" name="blah" ng-model="$ctrl.form.blah" ng-options="item.id as item.name group by item.etype | uppercase for item in $ctrl.opts | blah:$ctrl"></select>
angular.module('myapp').filter('blah', function() {
return function(items, ctrl) {
rv = [];
angular.forEach(items, function(item) {
if (ctrl.blah_f1 && item.etype == 'type1') rv.push(item);
if (ctrl.blah_f2 && item.etype == 'type2') rv.push(item);
});
return rv;
};
});
I acknowledge that directly accessing the controller may not be ideal, but I have yet to find a cleaner method to influence the filter. The flags are manipulated by two buttons acting as radio/checkboxes, ensuring at least one button remains active while allowing both to be selected simultaneously. This gives users control over which "type" of items appear in the select-box.