Angular select with ng-repeat doesnt work on json object

Question

<select name="repeatSelect" id="repeatSelect" ng-model="data.model">
  <option ng-repeat="option in data.availableOptions" value="{{option}}">{{option.name}}</option>
</select>

The Above code works but it leaves me unable to retrieve the id field of the option element. See the different Plunker - working example with value={{option.id}} https://plnkr.co/edit/?p=preview - example with value={{option}} https://plnkr.co/edit/iEoHaSYLZbnwId8zHi9U?p=preview.

If I use ng-options in select it works - https://plnkr.co/edit/iEoHaSYLZbnwId8zHi9U?p=preview.

Do I need to filter ng-model?

what do you want? if your availableOptions have id enitity in it then id will be fetched by you code. — Aman
– Aman, Commented Jan 5, 2018 at 9:59

Dalcof · Accepted Answer · 2018-01-05 10:44:07Z

1

You can't retrieve the id because by passing the option object in value you're converting it to a string, so data.model became "{"id":"1","name":"Option A"}". In order to pass the object use instead ng-value:

  <select name="repeatSelect" id="repeatSelect" ng-model="data.model">
    <option ng-repeat="option in data.availableOptions" ng-value="{{option}}">{{option.name}}</option>
  </select>

edited Jan 5, 2018 at 10:44

answered Jan 5, 2018 at 10:21

Dalcof

1647 bronze badges

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

Comments

Abdulsalam Khan · Accepted Answer · 2018-01-05 10:11:08Z

What I understand from your question the below code should work

<body ng-app="ngrepeatSelect">
  <div ng-controller="ExampleController">
  <form name="myForm">
    <label for="repeatSelect"> Repeat select: </label>
    <!--<select name="repeatSelect" id="repeatSelect" ng-model="data.model" ng-options="option as option.name for option in data.availableOptions">-->
    <!--    </select>-->
<select name="repeatSelect" id="repeatSelect" ng-model="data.model">
  <option ng-repeat="option in data.availableOptions" value="{{option.id}}">{{option.name}}</option>
</select>
  </form>
  <hr>
  <tt>model = {{data.model}}</tt><br/>
</div>
</body>

Collectives™ on Stack Overflow

Angular select with ng-repeat doesnt work on json object

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related