Angular ui.select not binding to ng-model

Question

I'm using angular ui.select and i'm having trouble with binding the selected value to a model. I am trying to set a variable of an object using ui.select ng-model="data". But for some reason it will not selected value will not bind to the model. This is the code I am using:

<ui-select ng-model="data" ng-disabled="disabled" theme='select2' style="min-width: 300px;" title="some title">
   <ui-select-match placeholder="Select a credit status in the list">[[ $select.selected.variable ]]</ui-select-match>
   <ui-select-choices repeat="options in options | filter: $select.search">
      <p>[[ options.variable ]]</p>
  </ui-select-choices>
</ui-select>

Using this does not bind the selected value to the model in my case. I then used $parent.data which does work but when I use multiple ui-selects only one is able to work at a time.

There must be something I am doing wrong any help is appreciated.

Artem · Accepted Answer · 2016-09-07 07:37:43Z

8

It's a common referencing issue.

You can use an object as ng-model

ng-model="data.value"

or you can try to initialize data inside the controller.

$scope.data = null;

or you can use the controllerAs view syntax as described in the John Papa's style guide (in this way you will avoid facing the same issue again and again).

<div ng-controller="CustomerController as controllerName">
   <ui-select ng-model="data" ng-disabled="disabled" theme='select2' style="min-width: 300px;" title="some title">
       <ui-select-match placeholder="Select a credit status in the list">[[ $select.selected.variable ]]</ui-select-match>
       <ui-select-choices repeat="options in options | filter: $select.search">
           <p>[[ options.variable ]]</p>
       </ui-select-choices>
   </ui-select>
</div>

edited Sep 7, 2016 at 7:37

answered Sep 6, 2016 at 15:51

Artem

1115 bronze badges

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

Comments

Andre.Anzi · Accepted Answer · 2016-09-06 15:02:26Z

2

This Plunker is the demo of the component you're using:

http://plnkr.co/edit/6iiLpQlZpqjd9tIyTFQY?p=preview

try to use an object as ng-model.

ng-model="data.attribute"

answered Sep 6, 2016 at 15:02

Andre.Anzi

1516 bronze badges

Comments

Alex Pojman · Accepted Answer · 2016-09-06 15:10:44Z

0

Since you are trying to use multiple ui-selects, I would recommend creating and initializing an array wrapped in a $scope object like the following:

$scope.selections = { selectedData = [] };

Then for the ng-model, you can use proper dot-notation:

ng-model="selections.selectedData"

Hope this helps!

answered Sep 6, 2016 at 15:10

Alex Pojman

687 bronze badges

Collectives™ on Stack Overflow

Angular ui.select not binding to ng-model

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related