[英]ng-model not working with select
这可能是一个重复的问题,但在将另一个数组绑定到下拉列表时显示数据的默认值时,我陷入了困境。 该列表已填充,但加载后应显示的所选值未显示。
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"}};
}]);
这是Plunkr: Plunkr:下拉问题-Angular.js
该代码对我来说似乎很好,但是您将subscription.subscribeAddresses.ChannelAddress初始化为“ yad_ajay@ts.com”。 我没有看到你的commInfo任何yad_ajay@ts.com。 猜猜这就是问题。
编辑:这是您的调音器的工作选择
<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>
更改:在ng-if中将ChannelType更改为DeliveryCHannel
更改ng-options增加跟踪依据,以帮助角度识别对象的唯一性
工作Plunker: - http://plnkr.co/edit/LSbJ2RVRw9zJleSwP3YT?p=preview
ng-model不适合commInfo列表中的任何模型。 这是您的解决方案。
[Jsfiddle](https://jsfiddle.net/6b3ntn73/28/)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.