如何使 angular select 到 select 成为 selected 值

How to make angular select to select a selected value

我在 JSON 中有来自后端的 selected 值，我在相同的 JSON 中也有来自后端的 select 元素内容。

问题是 selected 值未在 select 元素中 selected，但是当我 select 新元素时绑定工作正常。

我尝试了几种方法（选项元素 ng-repeat、ng-option），结果都一样。 data.cruiseCategoryId 中的选定值未在 select 元素中 select 编辑。

我的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

ng-init 可能是您 select.

的解决方案

ng-init doc

编辑

我建议您隔离您的模型，并使用您 JSON 中的数据为其指定一个默认值。 查看您的 plunker 已更新：

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

更新

这里已经存在的解决方案很少：

希望对您有所帮助。

您的 track by 语句破坏了它。使用 track by $index.

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

  1. 您的 JSON 具有属性 "value"，它被分配了字符串值 Ex:value: "10" 而 cruiseCategoryId 被分配为 cruiseCategoryId: 10 更改cruiseCategoryId: "10"

  2. Angular 文档提到以下 - 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

我进行了以下两项更改并且有效：

1.Changed cruiseCategoryId在$scope.data中从数字 10 到字符串 '10' 的值。

2.Removed track by i.value 来自 ng-options.

这里是 plunker

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

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

上的属性

Parsers

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

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

Formatters

格式化程序的工作方式与解析器相反。格式化程序处理从模型进入视图的数据。只要模型发生变化并且必须渲染，它们就会被调用。它们也将在页面的初始加载时被调用。

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

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

1.Remove track by i.value 来自 ng-options.

2.Add 在将 ng-model 发送到 ng-model 之前解析和更改 data.cruiseCategoryId 的指令。

这里是 plunker

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