it-swarm.com.de

AngularJS-Nullwert für select

Ich habe keine elegante Möglichkeit gefunden, null-Werte mithilfe von AngularJS mit einem <select> einzustellen. 

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

Wenn die Seite geladen ist, wird die erste Option ausgewählt, was in Ordnung ist, und die Ausgabe ist {"selected":null}. Wenn diese erste Option erneut ausgewählt wird, nachdem zu einer anderen gewechselt wurde, wird die Ausgabe in {"selected":"null"} (mit Anführungszeichen) gesetzt, was ich nicht erwarten würde. 

Laufendes Beispiel: http://plnkr.co/edit/WuJrBBGuHGqbKq6yL4La

Ich weiß, dass das Markup <option value=null> nicht korrekt ist. Ich habe es auch mit <option value=""> versucht, aber es entspricht einem leeren String und nicht null: Die erste Option ist daher nicht ausgewählt und eine andere Option, die nach der ersten Auswahl verschwindet, ist standardmäßig ausgewählt.

Irgendeine Idee ?

33
Juljan

Das sollte für Sie funktionieren:

Regler:

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

Vorlage:

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

Arbeitsplnkr

Sie sollten ng-options mit select verwenden.

36
Wawy

Sie können die Direktive ngOptions für die select verwenden. Laut der Dokumentation:

Optional kann ein einzelnes hartcodiertes <option>-Element, dessen Wert auf eine leere Zeichenfolge festgelegt ist, in das <select>-Element geschachtelt werden. Dieses Element repräsentiert dann die Option null oder "not selected". Siehe unten stehendes Beispiel für eine Demonstration.

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

Es ist offensichtlich eine bessere Idee, die Optionsliste direkt in der Steuerung zu definieren.

17
Blackhole

Versuchen Sie, ng-options zu verwenden, anstatt Tags manuell zu erstellen, wie in diesem Beispiel aus den Angular-Dokumenten leicht bearbeitet:

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

Die operativen Teile sind hier die Zeilen 17, die ein 'colors'-Objekt definieren, und die ng-options-Attribute, die diese Farben durchlaufen, um Optionen zu erstellen.

3
chrispittman

Wenn Sie wirklich NULL verwenden möchten, siehe unten. Sie müssen ng-options verwenden, damit Angular das Mapping handhaben kann:

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

Ich bin auf das gleiche Problem gestoßen, konnte es aber nicht über 'ng-options' lösen. Meine Lösung ist:

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;
            });
        }
    };
}]);

Sie können es so verwenden:

<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

Können Sie versuchen, parseInt für den Wert zu verwenden? Beispielsweise entsprechen sowohl "1" als auch "0" ihren jeweiligen ganzzahligen Werten. Wenn Sie die leere Zeichenfolge durch parseInt ausführen, können Sie leicht NaN erhalten.

> parseInt("") = NaN

> parseInt("0") === 0

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

Dies ist viel einfacher bei Angular2/Angular, wo Sie es einfach verwenden können

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

Dieser Wert ist kein String mehr, sondern ein echter Nullwert.

0
MEhran