2

Ok, I'm sure this one is super simple, though it's evading me.

I have a very simple dropdown select menu - as shown below - with predefined options.

I am setting the $scope.qty in my controller and it correctly selects the appropriate <option>

However, in my controller, on a save() function, when I get the value of $scope.qty i get the original value, that i set earlier, and not the newly selected on.

What I am missing to bind my selected option to the model?

        <select ng-model="qty">
               <option value="1">1</option>
               <option value="2">2</option>
               <option value="3">3</option>
               <option value="4">4</option>
        </select>

In my controller, I set the qty

$scope.qty = 4;

When I change my select, to say 2, $scope.qty still equals 4.

admdrew
  • 3,790
  • 4
  • 27
  • 39
Darren Wainwright
  • 30,247
  • 21
  • 76
  • 127
  • 1
    you could use `ng-options` directive instead. I am sure it will work as expected. – akonsu May 02 '14 at 20:06
  • yes, i could, though didn't want to have to put the options in the controller. In this case it's only ever going to be 1 to 4. – Darren Wainwright May 02 '14 at 20:10
  • `ngModel` on `select` requires `ngOptions` to handle the case you are trying to accomplish. – Steve Klösters May 02 '14 at 20:11
  • [It works just fine.](http://jsfiddle.net/6C572/) It could be a problem of multiple $scopes. – Karolis Juodelė May 02 '14 at 20:18
  • @KarolisJuodelė - ok, now thats just weird! I have stripped my controller back to the same as yours - yet i still don't have the model set... – Darren Wainwright May 02 '14 at 20:34
  • @KarolisJuodelė - THANK YOU! - I have this particular set of options loading in a modal using angular-ui modal. seems occasionally there will be a clash along the way - followed this for my fix http://stackoverflow.com/questions/18716113/scope-issue-in-angularjs-using-angularui-bootstrap-modal – Darren Wainwright May 02 '14 at 20:49

2 Answers2

0

You can simply create the array in ng-options:

<select ng-options="nr for nr in [1,2,3,4]" ng-model="qty"></select>

Although the way you did it should usually work too. ng-options is not required for ng-model to work. It's the other way around.

Marcel Gwerder
  • 8,353
  • 5
  • 35
  • 60
0

AngularJS 1.3 only allows for a single option element that can be used for the null value (aka, not selected).

You need to use the ngOptions convention.

Here's the documentation that explains this:
https://docs.angularjs.org/api/ng/directive/select

Garrett McCullough
  • 980
  • 7
  • 15
  • That's not really relevant in my question or example code though - i have no `null` values and always have something selected. The issue was that my selection wasn't being bound to the scope - Karolis put me in the right direction on this and it's now fixed without having to add unnecessary objects to my scope – Darren Wainwright May 04 '14 at 11:27
  • Sorry if I confused things by mentioning null values. I meant to steer you towards using ngOptions for the option list. I'm glad you got it working. – Garrett McCullough May 30 '14 at 17:59