how to make ng-model value set by ui-select value

Question

I am currently using angular-ui/ui-select in my project. I am able to bind the value of the ui-select to an object without issue, however it is binding the entire item that is being iterated over. I would like to only bind based on the item.codeId this would allow me to persist the correct data as well as display the correct value in the drop down when the page is loaded.

How can I setup ui-select to do this?

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

score 16 · Answer 1 · answered Jul 31 '14 at 17:51

16

I believe what you would do is use the repeat= clause and get rid of the value property. An example is here: http://plnkr.co/edit/htm8UNxVOlC076LVVezE?p=preview

Which I sort of copied from: 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>

answered Jul 31 '14 at 17:51

urban_raccoons

3,499
1
22
33

That works until you have a value bound to stateCode. I think it is because of a binding between object vs value? The value does select the correct option in the dropdown, also when i have it locally(not in plunker) I get a parser error. http://plnkr.co/edit/uUDzrKFwT7Tl4fHGprC1 – zmanc Jul 31 '14 at 18:04
You're going to need to elaborate a little more about what exactly it is you want. Also - re: parser error, might be an issue w/ hosting it locally. Are you running it in a localhost web server or just opening the files with a browser? – urban_raccoons Jul 31 '14 at 19:33
1

This was fixed in a build from today. https://github.com/angular-ui/ui-select/issues/130 – zmanc Aug 01 '14 at 02:59
it seems 'repeat' in 'ui-select-choices' binds the select value.but really, i dont know where should i found the doc – Marks Nov 14 '14 at 06:14
2

@Marks [there's an example here](https://github.com/angular-ui/ui-select/blob/master/examples/demo-bind-to-single-property.html). `ui-select` barely has documentation, you have to infer it from the examples. – Blaise Feb 12 '15 at 12:19

score 8 · Accepted Answer · answered Aug 01 '14 at 03:31

8

Your code is fine, but there was a bug that caused this when using a child array (constants.states).

I just fixed this issue at https://github.com/angular-ui/ui-select/pull/131, specifically this commit

New version v0.5.1 released. If you're using bower, just run bower update.

answered Aug 01 '14 at 03:31

dimirc

6,347
3
23
34

Solution suggested by urban_raccoons below works, while the accepted answer does not, possibly due to updates in ui-select code... – Michael Shmalko Sep 21 '16 at 04:00

how to make ng-model value set by ui-select value

2 Answers2