Angular select with ng-repeat doesnt work on json object

60 Views Asked by user3400965 At 05 January 2018 at 09:52

<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?

Original Q&A

There are 2 best solutions below

Dalcof On 05 January 2018 at 10:21 BEST ANSWER

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>

Abdulsalam Khan On 05 January 2018 at 10:11

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>

Angular select with ng-repeat doesnt work on json object

There are 2 best solutions below

Related Questions in JAVASCRIPT

Related Questions in ANGULARJS

Related Questions in JSON

Trending Questions

Popular # Hahtags

Popular Questions