AngularJS select crée une option avec la valeur "? object: null? "et n'utilise pas l'option par défaut vide lorsqu'il est lié à null

Voici à quoi ressemble le code

<select ng-model="nullableInt">
  <option></option>
  <option value="0">First option</option>
  <option value="1">First option</option>
  <option value="2">First option</option>
</select>

Quand nullableInt est null le code html généré est

<select ng-model="nullableInt">
  <option></option>
  <option value="? object:null ?"></option>
  <option value="0">First option</option>
  <option value="1">First option</option>
  <option value="2">First option</option>
</select>

Reproduit dans le plunkr ici: http://plnkr.co/edit/05pBEMJppmkrn3nFgYdk?p=info

Il vaut la peine de mentionner que je suis en train d'essayer d'éviter d'utiliser ng-optionsil semble un peu exagéré pour créer un point de terminaison pour AngularJS pour consommer certaines données qui vraiment ne changera pas souvent, voire jamais.

source d'informationauteur MushinNoShin

  1. 17

    Mise à jour 3/29/2017:

    Jorge Rodrigues dos Santos a déclaré, cela devrait être géré de façon différente pour les versions plus récentes de anguleux. Ci-dessous est extrait de la documentation en cours angulaire 1.6.3

    Éventuellement, un seul codée en dur de l'élément, avec la valeur définie
    à une chaîne vide, peut être imbriquée dans l'élément. Cette
    élément sera alors représenter la valeur null ou "non sélectionné" option. Voir
    l'exemple ci-dessous à des fins de démonstration.

    https://docs.angularjs.org/api/ng/directive/select

    Angulaire est la création d'une nouvelle option pour représenter la valeur null. Il n'a pas trouve l'une des options fournies dans le HTML.

    De lier null, définissez la valeur="null" sur la première option

    <option value="null"></option>

    http://plnkr.co/edit/kzPVu4hiMcP6wA6crGYt?p=preview

  2. 1

    Accepté la réponse n'a pas fonctionné pour moi, parce que ma propriété pourrait être vides, null ou undefined. Si vous utilisez la version 1.3+, alors vous pouvez utiliser un getterSetter de forcer la valeur à vide.

    J'avais en face de la chaîne de valeurs. Vous devrez gérer 0 ou d'autres falsy valeurs de la fonction en tant que bien.

    $scope.nullableIntCoerced = function(n) {
    return arguments.length ? ($scope.nullableInt = n) : ($scope.nullableInt || "");
}

<select ng-model="nullableIntCoerced" ng-model-options="{getterSetter:true}">
    <option value=""></option>
    ...

    https://code.angularjs.org/1.3.20/docs/api/ng/directive/ngModel

  3. 1

    Pour des versions plus récentes de Angularjs utilisation <option value=""> - </option> pour la valeur null

  4. 0

    Ci-dessous la solution a résolu le problème pour moi.

    Le problème ici, c'est quand ng-model est utilisé, il ajoute une option par défaut avec la valeur "?" et sans l'aide de ng-model, on ne peut pas utiliser ng-changer pour obtenir la sélection en cours. J'ai créé une onChangeSelection() dans lequel on peut définir la defaultSelected propriété de la comme ci-dessous

    $scope.onChangeSelection = function(id) {

    document.getElementById(id)[0].defaultSelected = true;
    $scope.selected = $('#'+id).val();
}

<select id="mySelect" ng-model="nullableInt" ng-options="option.value as option.text for option in arrayContents track by option.value"                    ng-change="{{onChangeSelection(id)}}" required>
    <option value="" ng-if="false"></option>
</select>

    Cela permettrait d'exclure de l'option par défaut de la liste d'options et aussi la première valeur comme defaultSelected.