ng-model 不适用于选择答案

【问题标题】：ng-model not working with selectng-model 不适用于选择
【发布时间】：2023-03-05 22:29:02
【问题描述】：

这可能是一个重复的问题，但在将另一个数组绑定到下拉列表时显示我的数据中的默认值时我被卡住了。列表已填充，但加载后应显示的选定值未显示。

这是我的示例代码：

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: Dropdown issue - Angularjs

【问题讨论】：

标签： javascript angularjs angularjs-scope angularjs-ng-repeat html-select

【解决方案1】：

代码对我来说似乎很好，但是您将 subscription.subscribeAddresses.ChannelAddress 初始化为“yad_ajay@ts.com”。我在您的 commInfo 中没有看到任何 yad_ajay@ts.com。猜猜这就是问题所在。

编辑：这是您的 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>

更改：在 ng-if 中将 ChannelType 更改为 DeliveryCHannel

更改 ng-options 添加跟踪以帮助从角度识别对象的唯一性

工作 Plunker：- http://plnkr.co/edit/LSbJ2RVRw9zJleSwP3YT?p=preview

【讨论】：

不，这不起作用，请参阅difference here
我成功了，通过编辑链接查看我的答案：plnkr.co/edit/LSbJ2RVRw9zJleSwP3YT?p=preview
比这更简单：只需将其更改为您的 ng-model：ng-model="subscription.subscribedAddresses"
@Walfrat 你能解释为什么它不能和track by channel.ChannelAddress一起工作吗？
channel 是一个对象，angular 不知道如何在它们之间匹配对象，以便在选择中设置当前选定的值。这就是您必须指定跟踪依据的原因。这也意味着AddressId 必须是唯一的，否则小部件将失败并在您的控制台中出现错误

【解决方案2】：

ng-model 不适合 commInfo 列表中的任何模型。这是您的解决方案。

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

【讨论】：