wake-up-neo.net

Winkel, boolescher Wert in einer Auswahlbox

Ich möchte einen booleschen Wert auf "true" oder "false" setzen, indem Sie "select" hier meinen Code verwenden:

<select class="span9" ng-model="proposal.formalStoryboard">
<option value="false">Not Included</option>
<option value="true">Included</option>
</select>

Der Wert (suggest.formalStoryboard) ist richtig auf true oder false gesetzt , die Änderung wird jedoch nicht im Auswahlfeld angezeigt, wenn der Wert bereits zugewiesen ist.

Ich habe versucht, ng-value = "true" und ng-value = "false" anstatt nur value, aber es funktioniert nicht so gut.

61
Jerome Ansia

EDIT: Die Kommentatoren haben darauf hingewiesen, dass meine ursprüngliche Lösung nicht wie beansprucht funktionierte. Ich habe die Antwort aktualisiert, um die korrekte Antwort anderer Personen wiederzugeben (ich kann eine akzeptierte Antwort nicht löschen).

Betrachten Sie für Angular 1.0.6 dieses HTML:

<div ng-app="">
  <div ng-controller="MyCntrl">
    <select ng-model="mybool"
            ng-options="o.v as o.n for o in [{ n: 'Not included', v: false }, { n: 'Included', v: true }]">
    </select>
    <p>
        Currently selected: <b>{{ mybool }}</b> opposite: {{ !mybool }}
   </p> 
 </div>
</div>

Und dieses JavaScript:

function MyCntrl($scope) {
    $scope.mybool = true;
}

Hier ist ein funktionierender DEMO für Angular 1.0.6 und hier ein funktionierender DEMO für Angular 1.3.14, der etwas anders ist.

76
ChrisP

Einfach nur so:

<select ng-model="someModel" ng-options="boolToStr(item) for item in [true, false]">
</select>

und definieren:

$scope.boolToStr = function(arg) {return arg ? 'Included' : 'Not included'};
58
ricofe25

Warum nutzen Sie das nicht einfach?

<select class="form-control" ng-options="(item?'Included':'Not Included') for item in [true, false]"></select>
32
Thiago Passos

Ich bin nicht sicher, in welcher Version von angle diese Version unterstützt wurde, aber Sie können jetzt den ng-value für ein Optionselement verwenden. Ihre HTMLs würden so funktionieren.

<select ng-model="proposal.formalStoryboard">
    <option ng-value="true">Included</option>
    <option ng-value="false">Not Included</option>
</select>

Es funktioniert auch für Radio und Checkboxen. 

3
Kieran

Ich habe ein Muster für Sie erstellt. Bitte überprüfen Sie this out.

Möchten Sie ein Modell verwenden, um die UI-Bindung zu steuern?

<div ng-app ng-controller="Ctrl">
    <select class="span9" ng-model="proposal.formalStoryboard">
        <option value="false">Not Included</option>
        <option value="true">Included</option>
    </select>
    <button ng-click="changeValue();">Click</button>
<div>

function Ctrl($scope) {
    $scope.proposal = {};
    $scope.proposal.formalStoryboard = true;

    $scope.changeValue = function () {
        $scope.proposal.formalStoryboard = !$scope.proposal.formalStoryboard;
        console.log($scope.proposal.formalStoryboard);
    }
}
1
zsong

Ich würde empfehlen, dafür eine Direktive zu verwenden. Wie üblich versuche ich mich von Timeouts und anderen asynchronen Vorgängen zu distanzieren, anstatt einer autoritativeren und direkteren Kontrolle vorzubeugen.

directives.directive('boolean', function() {
  return {
    priority: '50',
    require: 'ngModel',
    link: function(_, __, ___, ngModel) {
      ngModel.$parsers.Push(function(value) {
        return value == 'true' || value == true;
      });

      ngModel.$formatters.Push(function(value) {
        return value && value != 'false' ? 'true' : 'false';
      });
    }
  };
});

Die Priorität wird speziell so festgelegt, dass sie vor allen anderen Anweisungen ausgeführt wird (für die normalerweise keine Priorität festgelegt ist und der Standardwert 0 ist).

Zum Beispiel verwende ich diese Direktive (für eine True/False-Auswahl) mit meiner selectpicker-Direktive, die meine select-Elemente im selectpicker-Bootstrap-Plugin einschließt.

Bearbeiten:

Der Nachteil, den ich vergessen habe zu erwähnen, ist, dass Ihre HTML-Werte String-Werte sein müssen. Die Direktive übersetzt zwischen Ansicht und Modell, wobei der Modellwert in boolean und Ihre Ansicht im string-Format erhalten bleiben:

%select.selectpicker{ ng: { model: 'modelForm.listed' }, selectpicker: '{ }', boolean: true }
  %option{ value: 'true' } Listed
  %option{ value: 'false' } Unlisted
1
Volte

Das wird auch funktionieren. Erzwingen Sie einfach einen booleschen Wert, indem Sie einen Winkelausdruck für den Wert eingeben.

<select class="span9" ng-model="proposal.formalStoryboard">
    <option value="{{false}}" 
           ng-selected="proposal.formalStoryboard === false">
           Not Included
    </option>
    <option value="{{true}}"
            ng-selected="proposal.formalStoryboard === true">
            Included
    </option>
</select>
1
suh

Angular führt einen strikten Vergleich zwischen dem Value bind to ng-model und den Werten in den angegebenen Optionen durch. Die in der ursprünglichen Frage angegebenen Werte sind die Zeichenfolgen "false" und "true" . Wenn der Wert von ng-model vom Typ bool ist und wie {"Value": false} definiert ist, sind Angulars strenge ==== string und bool passen nie zusammen, daher ist das Auswahlfeld leer. 

Das eigentliche Problem ist: Wenn Sie einen Wert auswählen, ändert sich der Typ von Bool in String ({"Value": false} -> {"Value": "false"}). Dies kann zu Fehlern führen, wenn er zurückgeschickt wird.

Die beste Lösung für beide Probleme war für mich der von Thiago Passos in diesem Beitrag. ( https://stackoverflow.com/a/31636437/6319374 )

0
zlit

Ich hatte mit diesem frustrierenden Thema wenig Erfolg. Meine Lösung, obwohl nicht zu elegant, da es sich um eine zusätzliche Codezeile handelt, wurde jedes Mal gelöst. Dies funktioniert möglicherweise nicht in jeder Anwendung.

$scope.myObject.myBooleanProperty = $scope.myObject.myBooleanProperty.toString();

Wenn Sie es in eine "echte" Zeichenfolge umwandeln, bevor Sie versuchen, es an das auf der Seite angezeigte Modell zu binden, konnte es den Wert richtig auswählen.

0
Tony Basallo