ng-model中带有整数值的AngularJS输入选择停止工作答案

【问题标题】：AngularJS input select with integer value in ng-model stop workingng-model中带有整数值的AngularJS输入选择停止工作
【发布时间】：2018-06-12 06:18:24
【问题描述】：

我有一个使用 WebApi 和 AngularJS 用 C# .NET 编写的应用程序。

在我的应用程序的某些时候，我使用 ENUMS 用选项填充一个选择标签，因为由于值不在数据库中，我觉得不需要创建一个返回枚举的服务，因为我是使用剃须刀页面，所以我可以直接使用枚举。

在我将 angular 版本更新到 1.4.7 之前一切正常，然后停止工作，并且我无法降级 angular 版本（出于某些企业原因）。

例如，我有这个代码

<div class="col-md-3 col-xs-12">
    <label for="qualificacaoCobreJunta" class="col-xs-12 control-label">@IsiCTB.Internationalization.Res.Controls.label_cobre_junta<span class="obrigatorio">*</span></label>
    <div class="col-xs-12">
        <select class="form-control" id="qualificacao-cobre-junta" name="qualificacaoCobreJunta" ng-model="qualificacao.cobrejunta"
                required>
            <option value="" id="cobrejunta-0">@IsiCTB.Internationalization.Res.Controls.label_prompt_selecione</option>
            <option id="optCobreJuntaCom" value="@IsiCTB.Entities.Enums.ComSem.Com.ToInt()">@IsiCTB.Entities.Enums.ComSem.Com.GetValueString()</option>
            <option id="optCobreJuntaSem" value="@IsiCTB.Entities.Enums.ComSem.Sem.ToInt()">@IsiCTB.Entities.Enums.ComSem.Sem.GetValueString()</option>
            <option id="optCobreJuntaAmbos" value="@IsiCTB.Entities.Enums.ComSem.Ambos.ToInt()">@IsiCTB.Entities.Enums.ComSem.Ambos.GetValueString()</option>
            <option id="optCobreJuntaNA" value="@IsiCTB.Entities.Enums.ComSem.NA.ToInt()">@IsiCTB.Entities.Enums.ComSem.NA.GetValueString()</option>
        </select>
        <div ng-show="formQualificacaoSubmitted" class="error-form-validation">
            <div ng-show="gerenciaQualificacoesSoldador.qualificacaoCobreJunta.$error.required">@IsiCTB.Internationalization.Res.Controls.label_obrigatorio</div>
        </div>
    </div>
</div>

从 WebApi 获取数据的代码。

QualificacaoService.get({ id: idQualificacao }, function (data) {
    $scope.qualificacao = data;
});

然后返回一个带有一堆属性的 JSON 对象，就像这样：

{
  id: 1,
  cobrejunta: 2,
  anotherEnumField: 1,
  anotherEnumField2: 5,
  anotherEnumField3: 2
  ....
}

如果我在模型中有类似 qualificacao.cobrejunta = "2" （字符串）设置，则选择指向正确的选项，但如果我有 qualificacao.cobrejunta = 2（整数）似乎没有任何效果。

无论如何要让它再次工作，或者唯一（最好的）解决方案是创建一个将请求 API 的服务，该 API 将构建数组并返回该数组以使用 ng-option？

谢谢你们。

【问题讨论】：

在您的 Angular 代码中，尝试将值转换为字符串，然后再将其分配给模型，如果您也可以与我们分享，那就太好了。
你的意思是在 $scope 中使用 $watch 来转换成字符串？我没有放我的角度代码，因为我真的没有在那里做任何事情，只是将它发送到我的 webapi。
无论您在哪里进行模型分配...qualificacao.cobrejunta = "2" 您是从 webapi 获取值还是仅发送它们？如果是这样的话，我们应该看看电线发生了什么。
当我在编辑模式下输入表单时，我正在从我的 web api 获取值。我的 WebApi 以整数形式发送我的值，这就是问题所在。因为角度正在寻找字符串中的值。
这就是我希望看到的代码，您可以在其中将您从 webapi 获得的值分配给您的模型。我想如果你做一个简单的字符串转换就可以了。

标签： javascript c# angularjs angularjs-ng-model angularjs-select

【解决方案1】：

这是在讨论here。

你所要做的就是改变你的选择，如下所示

<select class="form-control" id="qualificacao-cobre-junta" name="qualificacaoCobreJunta" ng-model="qualificacao.cobrejunta" required
    ng-options="entry.value as entry.label for entry in [{value : @IsiCTB.Entities.Enums.ComSem.Com.ToInt(), label: '@IsiCTB.Entities.Enums.ComSem.Com.GetValueString()'}, {value: @IsiCTB.Entities.Enums.ComSem.Sem.ToInt(), label: '@IsiCTB.Entities.Enums.ComSem.Sem.GetValueString()'}, {value: @IsiCTB.Entities.Enums.ComSem.Ambos.ToInt(), label: '@IsiCTB.Entities.Enums.ComSem.Ambos.GetValueString()'}, {value:@IsiCTB.Entities.Enums.ComSem.NA.ToInt(), label: '@IsiCTB.Entities.Enums.ComSem.NA.GetValueString()'}]">
</select>

【讨论】：

【解决方案2】：

我认为 Angular 的行为在 1.4.8 版本中发生了变化。我有同样的问题：我有一个值列表到一个组合（静态值）中，我动态分配了值以通过控制器进行选择。版本 1.3.8 没有问题，但是当所选值保持空白时，版本 1.4.8 会出现问题。但是我可以在视图中显示值，而且是正确的。

为我解决这个问题的方法是将静态值转换为包含该值的对象，并在控制器的开头定义它（在分配值之前）。不得不这样做很奇怪，但我没有找到另一种成功的方法。

【讨论】：