1

angular-ui's ui-select2 documentation shows that you can do something like the following:

myAppModule.controller('MyController', function($scope) {
    $scope.select2Options = {
        allowClear:true
    };
});

<select ui-select2="select2Options" ng-model="select2">
    <option value="one">First</option>
    <option value="two">Second</option>
    <option value="three">Third</option>
</select>

However, changes to $scope.select2Options after that point do nothing. It would be nice if ui-select2 would watch select2Options for changes in that case and send them to select2 when they change.

I need to dynamically change maximumSelectionSize depending on what's selected, and doing something like the following is obviously the wrong thing to do since you shouldn't be messing with the DOM in a controller.

<select id="mySelect2" ui-select2="{ allowClear: true}" ng-model="select2" ng-change="selectChange()">
    <option value="one">First</option>
    <option value="two">Second</option>
    <option value="three">Third</option>
</select>

inside controller:

$scope.selectChange = function() {
    if(...) {
        $("#mySelect2").select2({ maximumSelectionSize: 1 });
    } else {
        $("#mySelect2").select2({ maximumSelectionSize: 0 });
    }
}

How can I pass those types of options through to select2 without using the DOM and mixing concerns in my controller? (I couldn't come up with a clean way to do this via a directive.)

Thanks!

Update:

Based on https://stackoverflow.com/a/16962249/405026, Stewie's answer, and my own testing I've added the following code to angular-ui ui-select's link method:

try {
    scope.uiSelect2 = angular.fromJson(attrs.uiSelect2);
} catch(e) {
    scope.$watch(attrs.uiSelect2, function (opts) {
        if (!opts) return;
        elm.select2(opts);
    }, true);
}

Is there a better way of handling the case where the ui-select2 attribute may be either an object literal or an object on the scope?

Community
  • 1
  • 1
Nate Bundy
  • 513
  • 1
  • 5
  • 10

1 Answers1

5

ui-select2 directive does not provide an API to this out-of-the-box, so you'd have to customize the directive to suit your needs by adding a $watcher on the select2 attribute (inside the directive linking function):

scope.$watch(attrs.uiSelect2, function(opts) {
  elm.select2(opts);
}, true);
Stewie
  • 60,366
  • 20
  • 146
  • 113
  • Thanks Stewie. I've headed down this path but now I'm running into trouble with how to support both their ui-select2="{ maximumSelectionSize: 0}" and ui-select2="select2Options" syntax at the same time. I'd like to turn this into a pull request, but first I need to figure out if attrs.uiSelect2 is an object literal or a reference to something on the scope, and I'm not sure how to do that. – Nate Bundy Jun 27 '13 at 22:37
  • If we can figure out how to tell if attrs.uiSelect2 is something that can actually be watched and only scope.$watch if it is, I'll gladly accept your answer! Thanks again. – Nate Bundy Jun 27 '13 at 22:53