Angular UI select does not display initial value

340 views Asked by At

I have a form containing field "Partner". User should be able to set or change the partner by looking up for alternative partner and selecting an it so I use ui-select for the field. There's variable formNodeValue defined in the scope containing a 'partner' object with an ID and NAME. My problem is that when I load the form the field is blank although the formNodeValue is set to:

{
  id: 124,
  name: 'Partner name'
}

This is how I use ui-select:

    <ui-select
            ng-model="formNodeValue"
            search-enabled="true">
        <ui-select-match>
            {{$select.selected.name}}
        </ui-select-match>
        <ui-select-choices
                refresh="doLookup($select.search)"
                repeat="item in (lookupItems | orderBy: 'name') track by item.id">
            <span ng-bind-html="item.name"></span>
        </ui-select-choices>
    </ui-select>

formNodeValue is actually a getter/setter function. When it's called without arguments it returns an object. When it's called with arguments it work as a setter and returns no value.

1

There are 1 answers

0
Hakaze On

As Ui-Select FAQs

https://github.com/angular-ui/ui-select/wiki/FAQs

ng-model not working with a simple variable on $scope

You cannot write:    
<ui-select ng-model="item"> <!-- Wrong -->
  [...]
</ui-select>

You need to write:    
<ui-select ng-model="item.selected"> <!-- Correct -->
  [...]
</ui-select>

Try setting formNodeValue like this

{
  selected: {
    id: 124,
    name: 'Partner name'
  }
}