角度默认选择选项答案

【问题标题】：Angular default select option角度默认选择选项
【发布时间】：2016-06-07 15:42:13
【问题描述】：

我无法让我的选择正确设置我的数据的默认选项。我通过 Ajax 调用从服务器获取数据。然后我希望能够使用表单编辑这些数据。我想将选择指向使用控制器对象中设置的选项，但是当您编辑选择时，我希望模型指向 ajax 数据，因为这是我写回服务器的内容。正如您在我的 plunkr 中看到的那样，四个项目中的每一个都应该填写它们的选择选项，但所有选择都开始为空。

在 Angular 的官方文档中，他们说要执行以下操作来设置默认值：

angular.module('defaultValueSelect', [])
  .controller('ExampleController', ['$scope', function($scope) {
  $scope.data = {
  availableOptions: [
    {id: '1', name: 'Option A'},
    {id: '2', name: 'Option B'},
    {id: '3', name: 'Option C'}
  ],
  selectedOption: {id: '3', name: 'Option C'} //This sets the default value of the select in the ui
  };
}]);

//Then in the HTML file:
<select name="mySelect" id="mySelect"
  ng-options="option.name for option in data.availableOptions track by option.id"
  ng-model="data.selectedOption"></select>

在我的情况下，选项不在 ajax 数据中，但只有当前选择的选项。所以我想通过控制器对象管理可用选项，但将选择绑定到 ajax 数据。谢谢。

https://plnkr.co/edit/Q16QLT?p=preview

【问题讨论】：

标签： angularjs

【解决方案1】：

您应该定义要绑定到“选项”的哪个属性：

<select ng-options="option.value as option.text for option in options" ng-model="item.select"></select>

工作演示https://plnkr.co/edit/BezGaYjykfQrFQ9nZop2?p=preview

【讨论】：

所以这主要是为了解决我想要的一个问题。似乎这样做会将每个选项的 value 属性更改为“string:{value}”，而不仅仅是“{value}”。检查这个更新的 plunker 上的选择选项，看看我的意思。知道如何防止这种情况但保留其他功能吗？ plnkr.co/edit/66I229?p=preview
为什么这会困扰您？ when selected item changed model is updated to right value.查看更新的 plunker plnkr.co/edit/BezGaYjykfQrFQ9nZop2?p=preview

【解决方案2】：

将您的选择更改为：

<select ng-options="option.text as option.text for option in options" ng-model="item.select"></select>

【讨论】：

【解决方案3】：

这肯定会起作用：

由于您的 ng-model 包含完整的选项对象，因此您还需要将其与 ng-options 中的对象绑定

<select name="mySelect" id="mySelect"
  ng-options="option as option.name for option in data.availableOptions track by option.id"
  ng-model="data.selectedOption"></select>

【讨论】：