Wijmo 5 AngularJS - ng重复和自动完成指令问题

时间:2014-11-21 18:15:35

标签: angularjs-ng-repeat wijmo

我正在尝试在ng-repeat中使用Wijimo自动完成指令,虽然我可以成功绑定到数据源但是我无法为特定实例设置范围 - 在1指令中选择的值是为所有实例设置的范围。

使用重复输入控件时,它是经典的ng-repeat问题。

我不确定wj-auto-complete指令是否设置范围内的哪个属性。

因此,这适用于1个实例和ng-repeat中的多个实例(但设置相同的值)。

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

我试过以下

<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>

但没有快乐。

看起来text属性是用所选值设置的?虽然物业价值有点奇怪。

1 个答案:

答案 0 :(得分:2)

ComboBox和AutoComplete控件都有一个“text”属性,用于获取或设置控件当前显示的文本,还有一个“selectedValue”属性,用于获取或设置当前选定的值。这两个通常匹配,除非用户正在键入并且不完整的文本与有效选择列表中的任何项目都不匹配。

这个小提示显示了如何使用“selectedValue”属性对ComboBox和AutoComplete都正常工作。我希望它有用:

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>