CODEWITHSUNDEEP
angularjsangularjs-select2
brimble2010
brimble2010

Reputation: 18384

Updating Select2 selected elements when Angular model changes

I'm working on a project for deploying software through an AngularJS UI. On the current view, you have to select what environment a deployment is for. The possible list of environments is stored in the scope and is what the options for the select are built from:

<select ui-select2="{ }" data-placeholder="All Environments" ng-model="transformParams.EnvironmentIds" multiple="multiple" class="input-xxlarge">
  <option ng-repeat="environment in environments" value="{{ environment.Id }}">{{ environment.Name }}</option>
</select>

Also on this page, there is a drop down that changes the current item that the environment is going to be set for. Choosing an existing item from the dropdown should take the Environments property from the existing item and select the correct elements in my Select2 box. This would then obviously update the transformParams.EnvironmentIds model. I've tried updating that model to change which environments are select but to no avail.

I've seen the bugfix to Angular 1.2 but I am stuck on 1.0.7 and don't have the option to upgrade Angular at this stage.

Upvotes: 2

Views: 1659

Answers (1)

brimble2010
brimble2010

Reputation: 18384

I solved the problem by using some options for the select2:

<select ui-select2="selectOptions" data-placeholder="All Environments" ng-model="transformParams.EnvironmentIds" multiple="multiple" class="input-xxlarge">
    <option ng-repeat="env in environments" value="{{ env.Id }}">{{ env.Name }}</option>
</select>

With the options being defined in the controller:

$scope.selectOptions = {
    'multiple': true,
    'simple_tags': true,
    'initSelection': function (element, callback) {
        callback($(element).data('$ngModelController').$modelValue);
    }
}

Upvotes: 1

Related Questions