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

我在JSON中选择了来自后端的值，在相同的JSON中选择了来自后端的元素内容

问题是，select元素中并没有选择selected值，但当我选择新元素时绑定工作正常

我尝试了几种方法（option element ng repeat，ng option），结果都是一样的。未在select元素中选择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>

所选值：{{data.cruiseCategoryId}

---

问题提示：

ng init

可能是您选择的解决方案

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

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

---

希望有帮助。

ng init

可能是您选择的解决方案

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

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

---

希望能有所帮助。

你的跟踪语句打破了它。使用

track by$index

您的track by语句会将其打断。使用

按$index跟踪

更新的Plunker-

您的JSON具有属性“value”，该属性被指定为字符串值，例如：

value:“10”

，而

cruiseCategoryId

被指定为

cruiseCategoryId:10

将其更改为

cruiseCategoryId:“10”

文件中提到：

在同一表达式中使用select as和track by时要小心。

标题下的

select as和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>

备选案文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>

更新的Plunker-

您的JSON具有属性“value”，该属性被指定为字符串值，例如：

value:“10”

，而

cruiseCategoryId

被指定为

cruiseCategoryId:10

将其更改为

cruiseCategoryId:“10”

文件中提到：

在同一表达式中使用select as和track by时要小心。

标题下的

select as和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>

备选案文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>

---

我做了以下两个改变，效果很好：

1.将

$scope.data

中的

cruiseCategoryId

的值从数字10更改为字符串“10”

2.从ng选项中删除了按i.value进行跟踪的

这是普朗克

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

1.将
$scope.data
中的
cruiseCategoryId
的值从数字10更改为字符串“10”

2.从ng选项中删除了按i.value进行跟踪的

这是普朗克

问题：我们有特定格式的数据，需要以不同的格式将其发送到
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选项中删除
按i.value跟踪

2.在发送到
ng model
之前，添加一条指令来解析和更改
数据.cruiseCategoryId

这是普朗克

问题：我们有特定格式的数据，需要以不同的格式将其发送到
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选项中删除
按i.value跟踪

2.在发送到
ng model
之前，添加一条指令来解析和更改
数据.cruiseCategoryId

这是普朗克

返回数据后，执行$scope.$apply（）操作，该操作将触发摘要函数更新模型。返回数据后，执行$scope.$apply（）操作，该操作将触发摘要函数更新模型。我确实希望在data.cruiseCategoryId中使用数字类型。也许你对实现这一点有什么建议？@Mindaugas-保持数据类型不变是最好的选择，否则会有变通办法；与绑定
ng选项之前一样
将值的数据类型更改为int
parseInt（value）
或将data.cruiseCategoryId更改为字符串数据type@Mindaugas-请勾选选项2，希望能解决问题。选项2会破坏模型绑定。我真的想在data.cruiseCategoryId中使用数字类型。也许你对实现这一点有什么建议？@Mindaugas-保持数据类型不变是最好的选择，否则会有变通办法；与绑定
ng选项之前一样
将值的数据类型更改为int
parseInt（value）
或将data.cruiseCategoryId更改为字符串数据type@Mindaugas-请勾选选项2，希望这能解决问题。像选项2一样，选项2正在破坏模型绑定。该id的数字是故意的。我们将整数存储在数据库中。我更愿意保持现状，解决问题