Question

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

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

我尝试了几种方法（选项元素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>

问题plunker：https://plnkr.co/edit/vQxdDA

Answer 1

更新了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

Answer 2

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

解析器

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

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

格式化程序

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

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

现在，我们需要做出修改以解决问题中提到的问题：

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

2.添加指令以解析并更改data.cruiseCategoryId，然后再将其发送至ng-model。

这是plunker

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

Answer 3

ng-init可以成为您选择的解决方案。

ng-init doc

修改

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

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

更新

这里几乎没有解决方案：

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

希望它有所帮助。

Answer 4

您的跟踪声明打破了它。使用track by $index。

Answer 5

我做了以下两项修改并且有效：

1.将cruiseCategoryId中$scope.data的值从第10位更改为字符串＆＃39; 10＆＃39;。

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

这是plunker

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

如何进行角度选择以选择所选值

5 个答案:

修改

更新