web-dev-qa-db-fra.com

Valeur nulle AngularJS pour select

Je ne pouvais pas trouver un moyen élégant de définir des valeurs null avec un <select> en utilisant AngularJS. 

HTML: 

<select ng-model="obj.selected">
  <option value=null>Unknown</option>
  <option value="1">Yes</option>
  <option value="0">No</option>
</select>

{{obj}}

JS: 

$scope.obj ={"selected":null};

Lorsque la page est chargée, la première option est sélectionnée, ce qui est correct, et le résultat est {"selected":null}. Lorsque cette première option est resélectionnée après avoir basculé sur une autre option, la sortie devient {"selected":"null"} (avec les guillemets), ce qui n’est pas ce à quoi je me serais attendu. 

Exemple en cours d'exécution: http://plnkr.co/edit/WuJrBBGuHGqbKq6yL4La

Je sais que le balisage <option value=null> n'est pas correct. J'ai aussi essayé avec <option value=""> mais cela correspond à une chaîne vide et non à null: la première option n'est donc pas sélectionnée et une autre option qui disparaît après la sélection de la première sélection par défaut.

Une idée ?

javascripthtmlhtml5angularjs
33
Juljan

Cela devrait fonctionner pour vous:

Manette:

  function MyCntrl($scope) {
    $scope.obj ={"selected":null};
    $scope.objects = [{id: 1, value: "Yes"}, {id: 0, value: "No"}]
  }

Modèle:

  <div ng-controller="MyCntrl">

    <select ng-model="obj.selected"
            ng-options="value.id as value.value for value in objects">
            <option value="">Unknown</option>
    </select>

<br/>
     {{obj}}
  </div>

Plnkr de travail

Vous devriez utiliser ng-options avec select.

36
Wawy

Vous pouvez utiliser la directive ngOptions sur la select. Selon la documentation:

Éventuellement, un seul élément <option> codé en dur, avec la valeur définie comme chaîne vide, peut être imbriqué dans l'élément <select>. Cet élément représentera alors l'option null ou "non sélectionnée". Voir l'exemple ci-dessous pour la démonstration.

<select ng-model="obj.selected" ng-options="key as label for (key, label) in ['No', 'Yes']">
  <option value="">Unknown</option>
</select>

Il est évidemment préférable de définir la liste des options directement dans le contrôleur.

17
Blackhole

Essayez d'utiliser ng-options au lieu de créer manuellement des balises, comme dans cet exemple, légèrement édité à partir de la documentation angulaire:

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

Les parties opératives ici sont les lignes 17, définissant un objet 'couleurs', et les attributs ng-options itérant sur ces couleurs pour créer des options.

3
chrispittman

Si vous voulez VRAIMENT utiliser null, voir ci-dessous. Vous devez utiliser ng-options et laisser Angular gérer le mappage:

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Color selector</title>

  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.8/angular.min.js"></script>

</head>
<body ng-app="">
    <script>
  function MyCntrl($scope) {
    $scope.obj ={"selected":null};
    $scope.objStates = [{key:"Unknown", value:null}, {key:"Yes", value:1}, {key:"No", value:0}]

    $scope.$watch('obj.selected', function(newVal){
      console.log(newVal);
    })
  }
  </script>
  <div ng-controller="MyCntrl">

    <select ng-model="obj.selected" ng-options="state.value as state.key for state in objStates">
    </select>

<br/>
     {{obj}}
  </div>
</body>
</html>
2
Andrew Church

J'ai rencontré le même problème mais je n'ai pas pu le résoudre via 'ng-options'. Ma solution est:

module.directive('modelToNull', [function () {
    return {
        scope: {
            check: "&modelToNull"
        },
        require: 'ngModel',
        link: function ($scope, element, attrs, ngModelController) {
            ngModelController.$parsers.Push(function (value) {
                return value == null || $scope.check({value: value}) ? null : value;
            });
        }
    };
}]);

Vous pouvez l'utiliser comme ceci:

<select ng-model="obj.selected" model-to-null="value == 'null'">
  <option value="null">Unknown</option>
  <option value="1">Yes</option>
  <option value="0">No</option>
</select>
2
Robert.MD

Pouvez-vous essayer d'utiliser parseInt sur la valeur? Par exemple, "1" et "0" seront égaux à leurs valeurs entières respectives. Si vous exécutez la chaîne vide via parseInt, vous pouvez facilement obtenir NaN.

> parseInt("") = NaN

> parseInt("0") === 0

> parseInt("1") === 1
0
Ishan Chatterjee

C'est beaucoup plus facile sur Angular2/Angular où vous pouvez simplement utiliser

<option [value]="null">Unknown</option>

Cette valeur n'est plus une chaîne, mais une vraie valeur null.

0
MEhran