select2 (Angular-ui)

[bsr]

Hello,

I use select2 (Angular UI - http://angular-ui.github.com/#directives-select2) and want to update input field value based on the selection.

              <select class="input-xlarge" ui-select2="" ng-model="sel"

                        data-placeholder="Select an option"

                        class="ng-pristine ng-valid" style="display: none;">

                    <option value=""></option>

                    <option ng-repeat="v in obj" value="{{v.Id}}">{{v.Name}}</option>

                </select>

                <input type="text" name="Role" value="{{getRole()}}" readonly="readonly" />

The problem is, v is an object with {Id, Name, Role}, and select can only use a single property in the value field. If I use {{v}} it flattens the object and can't access the properties.

What I want is to set the value of input text follows the select (Ideally sel.Role, but this doesn't work as option value can't be an object). 

I thought of a function (getRole()), but not sure how to watch for change of model value. Also, ng-change is not working with select2.

[Ryan Randall]

Hi bsr,

Here are a few ways... http://plnkr.co/edit/IZsJHH?p=preview

Ryan

[bsr]

Ryan, Thank you very much for the help and showing different approaches.