CODEWITHSUNDEEP
angularjsangular-componentsng-dropdown-multiselect
743
743

Reputation: 165

AngularJs Component and angularjs-dropdown-multiselect

I am new to AngularJs world and was trying to use angularjs-dropdown-multiselect inside component.

Component's HTML looks like:

<div>
  <select id="statusSelection" class="form-control"
          ng-options="status.name for status in $ctrl.statuses track by status.id"
          ng-model="$ctrl.status" ng-change="$ctrl.filterChanged()"></select>
</div>
<div ng-dropdown-multiselect="" options="$ctrl.categories" selected-model="$ctrl.category"
     events="$ctrl.events">
</div>

Event on status changed and category will call the same action.

MultiselectController.prototype.filterChanged = function() {
        this.onFilterChange({
          status: this.status,
          category: this.category});
    };
MultiselectController.prototype.events = {
        onItemSelect: function(item) {
            filterChanged();
        },
        onItemDeselect: function(item) {
            filterChanged();
        }
    };

When I try to run the above code and change the status, the code works as expected but fails during Category change(error in console).

Error message: ReferenceError: filterChanged is not defined

Angular version: 1.5.8

angularjs-dropdown-multiselect: 1.11.8

Plunker: http://plnkr.co/edit/JL7N6M?p=preview

Thanks for helping me out here.

Upvotes: 1

Views: 658

Answers (1)

743
743

Reputation: 165

I have created an instance variable and initialize it to instance of Controller.

var _instance;
function MultiselectController($scope) {
    this.statuses = testMultiselect.statuses;
    this.categories = testMultiselect.categories;
    this.$scope = $scope;
    this.setDefault();
    _instance = this;
}

Now, I am using this instance variable to access the functions on Controller.

MultiselectController.prototype.events = {
        onItemSelect: function(item) {
            _instance.filterChanged();
        },
        onItemDeselect: function(item) {
            _instance.filterChanged();
        }
    };

I am not completely happy with this as there should be better way to do the same but until I find, I will keep this.

Updated Plunker: http://plnkr.co/edit/D7BKI9?p=preview

Upvotes: 0

Related Questions