angular- ui-select - how to bind object property to ng-model

Question

i'm using the angular-ui-select in a simple user registration form:

<ui-select ng-model="user.countryCode" convert-to-string theme="selectize" class="dropdown">
    <ui-select-match placeholder="{{::strings('userDetails.countryPlaceholder')}}">{{$select.selected.name}}
    </ui-select-match>
    <ui-select-choices repeat="country in countries">
        <span ng-bind-html="country.name | highlight: $select.search"></span>
    </ui-select-choices>
</ui-select>

Here's my countries array definition:

$scope.countries = [
            {name: 'Afghanistan', code: 'AF'},
            {name: 'Albania', code: 'AL'},
            {name: 'Australia', code: 'AU'},
            {name: 'Austria', code: 'AT'},
            {name: 'Azerbaijan', code: 'AZ'},
            {name: 'Belarus', code: 'BY'},
            {name: 'Belgium', code: 'BE'},
            {name: 'Belize', code: 'BZ'},
            {name: 'Benin', code: 'BJ'}
];

I'm creating the user object in my html, every field had an ng-model binded to some property of the user. When i'm using simple input such as firstName then it's easy:

<input class="form-control" type="text" name="firstName" ng-model="user.firstName"/>

But with the dropdown - I want the country name to be displayed in the dropdown list options and the its code to be placed in the user object. I want to avoid writing code in the controller for this. (i.e. $scope.user.countryCode = $scope.country.selected.code; )

I cannot get the point, you just use user.countryCode as ng-model for the select, so everything you select is bind to $scope.user.countryCode without doing anything else — michelem
– michelem, Commented Jun 23, 2015 at 16:30
$sope.user.countryCode holds the hole country object (name + code), while I want it to have the country code only — Tamar Cohen
– Tamar Cohen, Commented Jun 24, 2015 at 6:31

Community · Accepted Answer · 2020-06-20 09:12:55Z

16

I think you can do:

<ui-select-choices repeat="country.code as country in countries">
    <span ng-bind-html="country.name | highlight: $select.search"></span>
</ui-select-choices>

From the documentation: https://github.com/angular-ui/ui-select/wiki/ui-select-choices

Example: Binding Single Property

In the repeat of the ui-select-choices identify the property you are wanting to bind to; repeat="item.id as item in cards">.

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Jun 23, 2015 at 16:27

Joao Leal

5,5521 gold badge15 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Tamar Cohen Over a year ago

Thanks! I must have missed that

hugsbrugs · Accepted Answer · 2015-10-30 14:24:25Z

0

You can use custom filter to "transparently" transform your object into an array :

https://code.angularjs.org/1.4.7/docs/error/filter/notarray

https://github.com/petebacondarwin/angular-toArrayFilter

answered Oct 30, 2015 at 14:24

hugsbrugs

3,6712 gold badges32 silver badges36 bronze badges

Comments

Bhabani P · Accepted Answer · 2015-06-23 16:45:07Z

-3

//in your view(aaa.html) part /
<select 
ng-model="Choices" 
ng-options="choice.code as choice.name for choice in countries ">

// in your controler file $scope.user.countryCode = "Choices";

answered Jun 23, 2015 at 16:45

Bhabani P

1,3911 gold badge8 silver badges5 bronze badges

Collectives™ on Stack Overflow

angular- ui-select - how to bind object property to ng-model

3 Answers 3

Example: Binding Single Property

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Example: Binding Single Property

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related