Menu
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>
828
To create a select component add the ng-select component as shown below: There are some required and optional properties: items : Array or object of local or remote content to populate as select options. bindLabel : The property of an object which we want to show as a label in a select box.
AngularJS ng-model Directive. The ng-model directive binds the value of HTML controls (input, select, textarea) to application data.
You need to change in your select input the ng-model attribute to selected_propertyType and watch it when it changes, then extract value and assign it to propertyType
This is another simple angular ui select example that demonstrates the uses of ui-select and example using angularjs 1.4 framework. The ui-select is a popular dropdown that supports search, filter and multiple select features. angular-ui-select contains a native AngularJS select directive based on Bootstrap, select2 and Selectize’s CSS.
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>
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.
35
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
