javascript - 如何通过 ui-select 值设置 ng-model 值

Question

我目前在我的项目中使用 angular-ui/ui-select。我能够毫无问题地将 ui-select 的值绑定(bind)到一个对象，但是它绑定(bind)了正在迭代的整个 item。我只想根据 item.codeId 进行绑定(bind)，这样我就可以保留正确的数据，并在加载页面时在下拉列表中显示正确的值。

如何设置 ui-select 来执行此操作？

<ui-select ng-model="myObject.stateCode" id="stateCode">
    <ui-select-match placeholder="Select a state...">{{$select.selected.codeDescription}}</ui-select-match>
    <ui-select-choices repeat="item in constants.states | filter: $select.search" value="{{$select.selected.codeId}}">
        <div ng-bind-html="item.codeDescription | highlight: $select.search"></div>
        <small ng-bind-html="item.codeId | highlight: $select.search"></small>
    </ui-select-choices>
</ui-select>

Answer 1

我相信您会做的是使用 repeat= 子句并去掉 value 属性。一个例子在这里: http://plnkr.co/edit/htm8UNxVOlC076LVVezE?p=preview

我从中复制的: https://github.com/angular-ui/ui-select/blob/master/examples/demo-bind-to-single-property.html

<ui-select ng-model="myObject.stateCode" id="stateCode">
    <ui-select-match placeholder="Select a state...">{{$select.selected.codeDescription}}</ui-select-match>
    <ui-select-choices repeat="item.codeId as item in constants.states | filter: $select.search">
        <div ng-bind-html="item.codeDescription | highlight: $select.search"></div>
        <small ng-bind-html="item.codeId | highlight: $select.search"></small>
    </ui-select-choices>
</ui-select>