如何进行角度选择以选择选定的值答案

【问题标题】：How to make angular select to select a selected value如何进行角度选择以选择选定的值
【发布时间】：2017-06-03 20:50:47
【问题描述】：

我在 JSON 中选择了来自后端的值，并且我也在同一个 JSON 中选择了来自后端的元素内容。

问题是在选择元素中没有选择选定的值，但是当我选择新元素时绑定工作正常。

我尝试了几种方法（选项元素 ng-repeat、ng-option），结果都相同。选择元素中未选择 data.cruiseCategoryId 中的选定值。

我的 app.js

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';

  $scope.data = {
    cruiseCategoryDropdownOptions: [{
      disabled: false,
      group: null,
      selected: false,
      text: "Interior Cabin Bella",
      value: "6"
    }, {
      disabled: false,
      group: null,
      selected: false,
      text: "Interior Cabin Fantastica",
      value: "7"
    }, {
      disabled: false,
      group: null,
      selected: false,
      text: "Oceanview Cabin Fantastica",
      value: "8"
    }, {
      disabled: false,
      group: null,
      selected: false,
      text: "Balcony Bella",
      value: "9"
    }, {
      disabled: false,
      group: null,
      selected: false,
      text: "Balcony Fantastica",
      value: "10"
    }, {
      disabled: false,
      group: null,
      selected: false,
      text: "Balcony Aurea",
      value: "11"
    }, {
      disabled: false,
      group: null,
      selected: false,
      text: "Balcony Wellness",
      value: "12"
    }, {
      disabled: false,
      group: null,
      selected: false,
      text: "Suite Fantastica",
      value: "13"
    }, {
      disabled: false,
      group: null,
      selected: false,
      text: "Suite Aurea",
      value: "14"
    }, {
      disabled: false,
      group: null,
      selected: false,
      text: "Suite Yacht Club Deluxe",
      value: "15"
    }],
    cruiseCategoryId: 10
  }
});

我的html

selected value: {{data.cruiseCategoryId}}
<select class="form-control"
    name="cruiseCategoryId"
    id="cruiseCategoryId"
    ng-options="i.value as i.text for i in data.cruiseCategoryDropdownOptions track by i.value"
    ng-model="data.cruiseCategoryId">
</select>

问题插件：https://plnkr.co/edit/vQxdDA

【问题讨论】：

取回数据后执行 $scope.$apply() 将触发摘要函数来更新模型

标签： angularjs angularjs-directive angularjs-ng-repeat ng-repeat ng-options

【解决方案1】：

ng-init 可能是您选择的解决方案。

ng-init doc

编辑

我建议你隔离你的模型，并用你的 JSON 数据给它一个默认值。查看您的 plunker 更新：

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

更新

这里已经存在一些解决方案：

https://stackoverflow.com/a/31643062/5566936

希望对你有帮助。

【讨论】：

【解决方案2】：

你的 track by 语句打破了它。使用track by $index。

【讨论】：

【解决方案3】：

更新 Plunker - https://plnkr.co/edit/0XApRsOwDq9uSt4u50Xx?p=preview

您的 JSON 具有属性“value”，该属性分配了字符串值 Ex:value: "10"，而 cruiseCategoryId 分配为 cruiseCategoryId: 10，将其更改为 cruiseCategoryId: "10"
Angular Doc 提到以下内容 - https://docs.angularjs.org/api/ng/directive/ngOptions

Be careful when using select as and track by in the same expression. 在标题 select as and track by 下，所以删除它

HTML：

<select class="form-control" name="cruiseCategoryId" id="cruiseCategoryId"
    ng-options="i.value as i.text for i in data.cruiseCategoryDropdownOptions"
    ng-model="data.cruiseCategoryId">
</select>

JSON : 只在下面改变

cruiseCategoryId: "10"

选项 2：

HTML：

<select class="form-control" name="cruiseCategoryId" id="cruiseCategoryId"
    ng-options="i.value as i.text for i in data.cruiseCategoryDropdownOptions"
    ng-model="data.cruiseCategoryId.toString()">
</select>

JSON：没有变化

cruiseCategoryId: 10

【讨论】：

我真的很想在 data.cruiseCategoryId 中使用数字类型。也许您对实现这一目标有什么建议？
@Mindaugas - 保持数据类型相同是最好的选择，否则有解决方法；就像在绑定 ng-options 之前一样，将值的数据类型更改为 int parseInt(value) 或 data.cruiseCategoryId 为字符串数据类型
@Mindaugas - 请检查选项 2，希望能解决问题
看起来选项 2 正在破坏模型绑定。

【解决方案4】：

我做了以下两个更改，并且成功了：

1.将$scope.data中cruiseCategoryId的值从数字10改为字符串'10'。

2.从 ng-options 中删除 track by i.value。

这里是笨蛋

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

【讨论】：

那个id是故意的。我们将整数存储在数据库中。我宁愿保持原样并解决问题。

【解决方案5】：

问题：我们有特定格式的数据，我们需要以不同的格式将其发送到ng-model，我们可以使用$formatters 和/或$parsers，这些是ngModelController 上的属性。

解析器

解析器会改变视图值保存到模型的方式。

ngModel.$parsers.push(function(value){
    value.toUpperCase();
    return value;
});

格式化程序

格式化程序的工作方式与解析器的工作方式相反。格式化程序处理从模型传入视图的数据。每当模型更改并且必须渲染时，它们都会被调用。它们也将在页面的初始加载时被调用。

ngModel.$formatters.push(function(value){
    value.toUpperCase();
    return value;
});

现在，为了解决问题中提到的问题，我们需要进行以下更改：

1.从 ng-options 中删除 track by i.value。

2.添加一个指令来解析和更改data.cruiseCategoryId，然后将其发送到ng-model。

这里是笨蛋

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

【讨论】：