Angular ui-select model binding

Question

I have following object in the scope

$scope.myData = {};
$scope.companies =    [{name:'Microsoft',slug:'micro'},
                {name:'Google',slug:'gg'}];

I am trying to bing slug to model by using ui-select

<div class="form-group">
  <label>Company</label>
    <ui-select ng-model="$parent.myData.company" theme="bootstrap">
    <ui-select-match placeholder="Select or search a company in the list...">{{$select.selected.name}}</ui-select-match>
    <ui-select-choices repeat="company in companies | filter: $select.search">
    <div ng-bind-html="company.name | highlight: $select.search"></div>
    </ui-select-choices>
    </ui-select>
</div>

However when I select a company, myData.company becomes full object such as. {"name":"Microsoft","slug":"micro"} How can I bind slug of company object to myData.company but able to search by company name?

user4170419 · Accepted Answer · 2016-05-20 09:18:32Z

2

I finally found how to do it thanks to this In order to make it work, <ui-select-choices> should be changed as follows;

<ui-select-choices repeat="company.slug as company in companies | filter: $select.search">

answered May 20, 2016 at 9:18

user4170419

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

Collectives™ on Stack Overflow

Angular ui-select model binding

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related