1

I'm trying to use CiviCRM's crmUiSelect AngularJS directive to create a select2 element in a form. I want to call a function in my controller when the user changes this element, so I'm using the ngChange directive. But each change is firing two calls to this function.

Here's a screenshot of the element, with the console logging below, after I've made one selection.

screenshot

This is my controller code:

$scope.options = [
  {"value": "foo", "label": "Foo"},
  {"value": "bar", "label": "Bar"},
  {"value": "baz", "label": "Baz"},
  {"value": "bat", "label": "Bat"}
];

$scope.log = function (value) {
  console.log(value);
};

and my template code:

<select
  crm-ui-select="{allowClear: true}"
  ng-model="myVar"
  ng-change="log(myVar)"
  multiple="multiple"
  class="big"
>
  <option ng-repeat="option in options" value="{{option.value}}">
    {{option.label}}
  </option>
</select>

How can I get the event to fire once instead of twice?

Somewhat frustratingly, the event is fired only once if I remove multiple="multiple" or if I remove the crm-ui-select directive. But I really do want a select2 mtuli-select here.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.