set selected option in angular from array of values

Question

I have an array of elements which comes from a service, but I can't set a select option. the code goes like this..

"Model":

{
 buses : [{
          name: 'example1',
          seats: '32',
          license: '1234',
          type : {
             name: 'type1'
          }
          },{
          name: 'example2',
          seats: '31',
          license: '123',
          type : {
             name: 'type2'
          }
          },{
          name: 'example3',
          seats: '33',
          license: '1235',
          type : {
             name: 'type3'
          }
          }]
}

Controller

Dealer.getAll().then(function (dealers) {
    $scope.allDealers = dealers.data;
});

View:

<tr ng-repeat="busT in dealer.buses track by $index">
                <td>{{busT.name}}</td>
                <td>
                    <select ng-options="bt.name for bt in busTypes" ng-model="dealer.buses[$index].type.name" >
                    </select>
                </td>
                <td>{{busT.seats}}</td>
                <td>{{busT.license}}</td>
            </tr>

the select should be set with what comes from the ajax call, since the template is a table for each row I want the bus type to be set in the select option that information is under buses[position].type.name, that is why I'm iterating over a tr, the ng-options are loading and showing correctly but the ng.model pointing to my dealer.buses is not reflecting what is there.

Here is a fiddle with the problem Fiddle

Joe Enzminger · Accepted Answer · 2016-02-16 16:09:45Z

3

+50

<table ng-controller="MyCtrl">
   <tr ng-repeat="busT in busList track by $index">
      <td>{{busT.name}}</td>
      <td>
          <select ng-model="busList[$index].type.name">
             <option ng-repeat="bt in busTypes track by $index" ng-value="bt.name">{{bt.name}}</option>
          </select>
      </td>
      <td>{{busT.seats}}</td>
      <td>{{busT.license}}</td>
   </tr>
</table>

The problem is that you are trying to compare an object to a string, which will always fail.

The model -

busList[$index].type.name

is a string, while the value for each option is the entry into the busType array, each of which is an object, i.e:

{ 
  id: 1,
  type: 'type1'
}

You could probably write a filter so that ng-options would still work, but you can also just do as I did above and use an ng-repeat with ng-value.

Here is the working Fiddle.

edited Feb 16, 2016 at 16:09

answered Feb 16, 2016 at 16:04

Joe Enzminger

11.2k3 gold badges54 silver badges77 bronze badges

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

Comments

DamianoPantani · Accepted Answer · 2016-02-10 19:22:19Z

0

Not fully clear question. I can only guess you have to replace:

ng-model="dealer.buses[$index].type.name"

with:

ng-model="busT.type.name"

But it should only work if type is defined (even empty, but defined) object.

answered Feb 10, 2016 at 19:22

DamianoPantani

1,4362 gold badges17 silver badges25 bronze badges

1 Comment

ocespedes Over a year ago

actually the selected option is in dealer.buses[$index].type.name, that is my selected type. but the other list of types are under busTypes array, but I can't get the selected option from the dealer.buses[$index].type.name, it shows blank in the select tag

Yoan · Accepted Answer · 2016-02-11 22:09:30Z

0

You have to use "track by" like in this example:

<div ng-controller="ExampleController">
  <form name="myForm">
    <label for="mySelect">Make a choice:</label>
    <select name="mySelect" id="mySelect"
      ng-options="option.name for option in data.availableOptions track by option.id"
      ng-model="data.selectedOption"></select>
  </form>
  <hr>
  <tt>option = {{data.selectedOption}}</tt><br/>
</div>

So, you have to replace: ng-options="bt.name for bt in busTypes"
with: ng-options="bt.name for bt in busTypes track by bt.name"

answered Feb 11, 2016 at 22:09

Yoan

2,2171 gold badge14 silver badges21 bronze badges

Collectives™ on Stack Overflow

set selected option in angular from array of values

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related