AngularJS input select with integer value in ng-model stop working

Question

I have a app written in C# .NET using WebApi and AngularJS.

At some points in my aplication I fill up a select tag with options using ENUMS, because since the values ​​are not in the database I don't feel like need to create a service that return the enums because I'm using razor pages so I can use the enums directly.

Everything was working fine until I updated the angular version to 1.4.7, Than this stop working, and I can't downgrade the angular version (for some enterprise reasons).

For example, I have this code

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

Code getting data from WebApi.

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

And that return a JSON object with a bunch of attributes, like that:

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

If I have like qualificacao.cobrejunta = "2" (string) setting in the model, the select is pointing to right option, but if I have qualificacao.cobrejunta = 2 (integer) than nothing seems to work.

There's anyway to get this working again, or the only (best) solution is crete a service that will request a API, and this API will build the array and than return that for using ng-option?

Thank you guys.

Answer 1

This is discussed here .

All you have to do is to change your select as below

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

Answer 2

I think Angular behaviour has changed with the version 1.4.8. I had the same problem: I had a list of values into a combo (static values), and I assigned dynamically the value to select throught the controller. It wasn't a problem with version 1.3.8, but it's with 1.4.8 when the selected value remains blank. But I can show the value in the view, and it's correct.

The way to solve this for me was to translate that static values, to an object containing that values, and defining it al the begin of the controller (before assigning the value). It's strange to have to do it, but I didn't find another way to success.