Wijimo 5 AngularJS - ng repeat and Auto Complete Directive issue

Question

I am trying to use the Wijimo Auto Complete Directive inside a ng-repeat and though I can bind successfully to a data source I cannot set the scope for a specific instance - the value selected in 1 directive is set for all instances in the scope.

Its the classic ng-repeat issue when using using repeated input controls.

I am not sure if its the way the wj-auto-complete directive sets which property on the scope.

So this works fine for 1 instance and multiple instances within an ng-repeat (but sets the same value).

  <wj-auto-complete
                text="selectedHotel"
                items-source="limo.hotelData"
                placeholder="Hotel"
                display-member-path="address"
                max-items="50"/>
             </div>
            <p>{{selectedHotel || json}}</p>

I have tried the following

<div ng-repeat="flight in flights">
  <wj-auto-complete              
  text="flight.from"                    
  items-source="limo.hotelData"                    
  placeholder="Hotel"
  display-member-path="address"                    
  max-items="50"/>
</div>

but no joy.

It looks like the text property is what is set with the selected value? Though the property value is a little odd.

Answer 1

Both the ComboBox and AutoComplete control have a "text" property that gets or sets the text currently shown by the control, and also a "selectedValue" property that gets or sets the value that is currently selected. These two often match, except while the user is typing and the incomplete text doesn't match any items in the list of valid choices.

This fiddle shows how using the "selectedValue" property works OK for both the ComboBox and AutoComplete. I hope it's useful:

http://jsfiddle.net/Wijmo5/8p94jo6q/

<table class="table table-condensed">
    <thead>
        <th>ID</th>
        <th>Country</th>
        <th>AutoComplete</th>
        <th>ComboBox</th>
    </thead>
    <tbody>
        <tr ng-repeat="item in data">
            <td>
                {{item.id}}
            </td>
            <td>
                {{item.country}}
            </td>
            <td>
                <wj-auto-complete
                    items-source="countries"
                    selected-value="item.country"
                    placeHolder="country"
                    required="false">
                </wj-auto-complete>
            </td>
            <td>
                <wj-combo-box
                    items-source="countries"
                    selected-value="item.country"
                    placeHolder="country"
                    required="false">
                </wj-combo-box>
            </td>
        </tr>
    </tbody>
</table>