web-dev-qa-db-ja.com

ng-modelの値をui-selectの値で設定する方法

現在、プロジェクトでangular-ui/ui-selectを使用しています。問題なくui-selectの値をオブジェクトにバインドできますが、反復されているitem全体をバインドしています。 item.codeIdに基づいてのみバインドしたいので、ページが読み込まれたときに、正しいデータを保持したり、ドロップダウンに正しい値を表示したりできます。

これを行うためにどのように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>
javascriptangularjsangularjs-directiveangular-uiangular-ui-bootstrap
15
zmanc

あなたのコードは問題ありませんが、子配列（constants.states）を使用するときにこれを引き起こすバグがありました。

https://github.com/angular-ui/ui-select/pull/131 でこの問題を修正しました、具体的には this commit

新しいバージョン v0.5.1 がリリースされました。 bowerを使用している場合は、bower update。

8
dimirc

あなたがすることは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>
16
urban_raccoons