angular select inside ng-repeat

Question

I have situation like this:

<span ng-repeat="personNum  in unit.PricePerson">
      {{personNum}}
      <select ng-model="personNum" 
              ng-options="o as o for o in unit.PricePerson track by $index"></select>
</span>

unit.Price are numbers array,something like [5,6,7,8,9] but each select has value of nine. I want that first select selected option 5,other one 6, etc. Also, i noticed I can not change options using mouse.

There are 5 select boxes generated which is fine, there are also number from 5 to 9 generated as options inside each select. Those things are ok.

If you want the selected option to be 5,6,7 etc, the model you are setting on it will have to be that value - personNum for what you are using right now. Might help to see the data you are using (1 node is fine) — ajmajmajma
– ajmajmajma, Commented Jul 20, 2015 at 14:16
I understand that, I am saying whatever you have set in personNum will set your selected option because right now you have it set as the model on the select list. It would help to see your data. Is the pre-selected item inside your data set? if you can show what one node of unit.PricePerson looks like, it would be a lot easier to help :) — ajmajmajma
– ajmajmajma, Commented Jul 20, 2015 at 14:21

DWDuck · Accepted Answer · 2015-07-20 14:37:07Z

3

Part of your problem might be the track by $index in your select... Have a look at the plunker below. Also, use ng-init to set a default value.

http://plnkr.co/edit/2ZN1J61PD1Ev2OK1tezg

The code:

<span ng-repeat="personNum  in unit.PricePerson">
  <select ng-init="select[$index]=personNum" ng-model="select[$index]" ng-options="o as o for o in unit.PricePerson">

  </select>
</span>

As @cyan suggested, I think you also need the ng-model to be something other than the variable in your outer ng-repeat.

Hope this helps.

answered Jul 20, 2015 at 14:37

DWDuck

2391 silver badge6 bronze badges

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

Comments

brae · Accepted Answer · 2015-07-20 14:51:13Z

Your question a little unclear, but it looks like you are having issues with your ng-options configuration.

It's generally not recommended to use select as with track by, as they are not designed to work together and can have unexpected results. Also, you are using the unit.PricePerson reference inside your ng-options instead of the individual iteration object personNum.

You should have something like:

<span ng-repeat="personNum in unit.PricePerson">
      {{personNum}}
      <select ng-model="personNum.selectedOption" 
              ng-options="o as o for o in unit.PricePerson">
      </select>
</span>

However, without seeing your javascript object PricePerson, I can't be certain what your ng-options configuration should be. Have a look at the AngularJS API for ngOptions. In the Arguments section, there are suggested templates for your ng-options expression.

changtung · Accepted Answer · 2015-07-20 14:42:51Z

-1

Try to use different ng-model inside select, than in ng-repeat and initiate it to have desired value:

<span ng-repeat="personNum  in unit.PricePerson">
      {{personNum}}
      <select ng-init="personNum1 = personNum" ng-model="personNum1" 
              ng-options="o as o for o in unit.PricePerson track by $index"></select>
</span>

etc.

So, to complete this. Look that you use same ng-model, that is why you cannot change options with a mouse. In your controller, create an array of options:

    $scope.selectedOptions = ['5','6','7','8','9'];

Then use it in your view:

          <select ng-model="selectedOptions[$index]" 
              ng-options="o as o for o in unit.PricePerson track by $index">

edited Jul 20, 2015 at 14:42

answered Jul 20, 2015 at 14:21

changtung

1,6242 gold badges15 silver badges19 bronze badges

1 Comment

DWDuck Over a year ago

@cyan is actually on the right track I think... remove track by $index and this one probably works, although I think the ng-model may need to be an array here, since we have an array of selects.

Collectives™ on Stack Overflow

angular select inside ng-repeat

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related