AngularJS Check if a select's options (with filter) changed

Question

I have a custom directive, which is restricted as attribute, and works on select elements to make them more styleable (using jquery select-bootstrap).

Currently there isn't a proper way to check/watch if the options with filter of the select have been changed.

e.g.

<label>First Select</label>
<select ng-model="vm.myFirstModel"
  ng-options="hour.id as hour.label for hour in vm.hours" selectpicker> </select>

<label>Second Select</label>
<select ng-model="vm.mySecondModel"
  ng-options="hour.id as hour.label for hour in vm.hours | filter:vm.filterHours(vm.myFirstModel)" selectpicker>
</select>

My directive

angular.module('VAdmin.theme')
        .directive('selectpicker', selectpicker);

    /** @ngInject */
    function selectpicker() {
        return {
            restrict: 'A',
            require: '?ngOptions',
            priority: 1500, // make priority bigger than ngOptions and ngRepeat
            link: {
                pre: function(scope, elem, attrs) {
                    elem.append('<option data-hidden="true" disabled value="">' + (attrs.title || 'Select something') + '</option>')
                },
                post: function(scope, elem, attrs) {
                    function refresh() {
                        elem.selectpicker('refresh');
                    }

                    if (attrs.ngModel) {
                        scope.$watch(attrs.ngModel, refresh);
                    }

                    if (attrs.ngDisabled) {
                        scope.$watch(attrs.ngDisabled, refresh);
                    }

                    elem.selectpicker({
                        dropupAuto: false,
                        hideDisabled: true
                    });
                }
            }
        };
    }

I need to run refresh() when my ng-options change (with filter)

Joao Polo · Accepted Answer · 2016-10-28 13:13:21Z

1

You can create a model-watch to be used at second selector:

<select ng-model="vm.mySecondModel"
    model-watch="vm.myFirstModel"
    ng-options="hour.id as hour.label for hour in vm.hours | filter:vm.filterHours(vm.myFirstModel)" selectpicker>

and then, watch for this:

if (attrs.modelWatch) {
    scope.$watch(attrs.modelWatch, refresh);
}

answered Oct 28, 2016 at 13:13

Joao Polo

2,1631 gold badge17 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Mateus Vitali Over a year ago

Ok @Joaozito Polo this solution works for the cascade, but what if my controller change the array hours from ngoptions?

Mateus Vitali Over a year ago

oh! I would have to do the same for my array, like options-watch="vm.hours" and if (attrs.optionsWatch) { scope.$watch(attrs.optionsWatch, refresh); }

Joao Polo Over a year ago

I used that approach in a directive mine, to validate the password versus confirmation password. And yes, you will need two watches, or some form to send a array of watches (with scope maybe)

Collectives™ on Stack Overflow

AngularJS Check if a select's options (with filter) changed

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related