CODEWITHSUNDEEP
javascriptangularjsangularjs-scopeangularjs-ng-repeathtml-select
Sachin Siwach
Sachin Siwach

Reputation: 90

ng-model not working with select

This might probably be a duplicate question but I am stuck while showing the default value from my data while binding another array to dropdown list. The list gets populated but the selected value which should show up after loading is not showing up.

This is my sample code:

HTML:

<div ng-app="app">
<div ng-controller="myCntrl">
  <select class="form-control right" 
  ng-if="subscription.subscribedAddresses.ChannelType=='EMAIL'" 
  ng-model="subscription.subscribedAddresses.ChannelAddress" 
  ng-options="channel.ChannelAddress for channel in commInfo.emails track by channel.ChannelAddress" required>
  </select>
</div>

JS:

angular.module('app', [])
.controller('myCntrl', ['$scope', function($scope) {
$scope.commInfo = {
  "emails": [{
    "ChannelAddressId": 5000054652,
    "DeliveryChannel": "EMAIL",
    "ChannelType": null,
    "ChannelAddress": "ya_ajay@net.com"
  }, {
    "ChannelAddressId": 5000075277,
    "DeliveryChannel": "EMAIL",
    "ChannelType": null,
    "ChannelAddress": "yad_ay@ts.com"
  }, {
    "ChannelAddressId": 5000075278,
    "DeliveryChannel": "EMAIL",
    "ChannelType": null,
    "ChannelAddress": "yadav_aaj@gmail.com"
  }, {
    "ChannelAddressId": 5000075279,
    "DeliveryChannel": "EMAIL",
    "ChannelType": "UNKNOWN",
    "ChannelAddress": "test_ay@mail.com"
  }],
  "phones": [{
    "ChannelAddressId": 5000075390,
    "DeliveryChannel": "PHON",
    "ChannelType": "UNKNOWN",
    "ChannelAddress": "4561237895"
  }, {
    "ChannelAddressId": 5000075397,
    "DeliveryChannel": "PHON",
    "ChannelType": "UNKNOWN",
    "ChannelAddress": "7894561236"
  }]
};
$scope.subscription = {"serviceName":"RAM Month","subscribedAddresses":{"ChannelAddress":"yad_ajay@ts.com","ChannelType":"EMAIL"}};
}]);

Here is the Plunkr: Plunkr: Dropdown issue - Angularjs

Upvotes: 0

Views: 458

Answers (2)

R3v0luzz3r
R3v0luzz3r

Reputation: 1

the ng-model does not fit to any of the models in the commInfo list. Here your solution.

[Jsfiddle](https://jsfiddle.net/6b3ntn73/28/)

Upvotes: 0

Walfrat
Walfrat

Reputation: 5353

The code seems fine to me, however you init the subscription.subscribeAddresses.ChannelAddress to "yad_ajay@ts.com". I don't see any yad_ajay@ts.com in your commInfo. Guess that's the proble.

EDIT : here is a working select of your plunker

 <select class="form-control right" 
  ng-if="subscription.subscribedAddresses.DeliveryChannel=='EMAIL'" 
  ng-model="subscription.subscribedAddresses" 
  ng-options="channel as channel.ChannelAddress for channel in commInfo.emails track by channel.ChannelAddressId" 
  required>
  </select>

Changes : Change ChannelType to DeliveryCHannel in the ng-if

Changes ng-options add track by to help angular identify unicity of objects

Working Plunker :- http://plnkr.co/edit/LSbJ2RVRw9zJleSwP3YT?p=preview

Upvotes: 4

Related Questions