AngularJS: Reverse Checkbox Status

Question

Irgendwie, durch die Magie von Angular, wenn Sie ng-model verwenden und es einen booleschen Wert zur Verfügung stellen, wird Ihr Kontrollkästchen überprüft, ob der Boolesche Wert wahr ist, und deaktiviert, wenn falsch.

<input type="checkbox" ng-model="video.hidden"> 

Während dies allein ziemlich verwirrend ist, ich versuche tatsächlich den geprüfte Zustand rückgängig zu machen, denn im Gegensatz zu dem todo Beispiel, wo todo.done die Box bedeutet, wird überprüft, ist mein Modell mehr wie todo.incomplete.

Leider meine erste Vermutung hat nicht funktioniert:

<input type="checkbox" ng-model="!video.hidden"> 

ich in der Lage bin, wo das Modell mir diktiert wurde, so kann ich es nicht haben, ändern und will nicht massage es auf dem Client (weil ich Client-Objekte zurück zum Server sende, da es in einer vertrauenswürdigen Umgebung läuft).

aktualisieren

Dies funktioniert in 1.3 und nicht geben Sie Strings (1.2.xxx gab dir Saiten statt booleans):

<input type="checkbox" ng-model="video.hidden" ng-true-value="false" ng-false-value="true"> 

Answer 1

Sie können das jetzt machen, ohne die Notwendigkeit von benutzerdefinierter Richtlinie, Winkel Unterstützung ng-true-value und ng-false-value

https://docs.angularjs.org/api/ng/input/input[checkbox]

Ihr Beispiel soll jetzt funktionieren <input type="checkbox" ng-model="video.hidden" ng-true-value="false" ng-false-value="true">

Answer 2

Ich glaube nicht, es gibt einen Weg zu tue das rein in der Vorlage. Der naheliegendste Weg, dies zu erreichen, ist das Erstellen einer neuen Bereichsvariablen, die manuell an Ihren Modellwert gebunden wird. So wie:

<input type="checkbox" ng-model="videoShowing"> 

Und in Ihrem Controller:

$scope.videoShowing = !$scope.video.hidden; 

$scope.$watch('video.hidden', function(value) { 
    $scope.videoShowing = !value; 
}); 
$scope.$watch('videoShowing', function(value) { 
    $scope.video.hidden = !value; 
} 

Man könnte fast verwenden nur einen Weg, um mit einem ng Wechsel Bindung, aber das funktioniert nicht ganz:

<input type="checkbox" ng-checked="!video.hidden" ng-change="???"> 

Da ng-change den aktuellen Wert überhaupt nicht in den lokalen Bereich mischt. Wenn Sie in einem Kontext waren, in dem Sie Zugriff auf den NgModelController hatten, könnten Sie etwas tun, aber Sie würden dafür eine benutzerdefinierte Anweisung benötigen. Es wäre nicht schwer, eine "invertierte" Attributrichtlinie zu erstellen, die die Formatierer und Parser des NgModel modifiziert. Ich würde vorschlagen, dass wenn Sie viele invertierte Kontrollkästchen benötigen.

bearbeiten

Für die Nachwelt ein „umgekehrtes“ Attribut zu machen ist super einfach, könnte genauso gut, genau das tun. Direktiven zu machen erscheint zunächst immer wie ein Schmerz, aber es ist wirklich der Winkelweg.

someModule.directive('inverted', function() { 
    return { 
    require: 'ngModel', 
    link: function(scope, element, attrs, ngModel) { 
     ngModel.$parsers.push(function(val) { return !val; }); 
     ngModel.$formatters.push(function(val) { return !val; }); 
    } 
    }; 
}); 

Könnte die Priorität setzen müssen, oder „unshift“ statt Push, um sicherzustellen, dass diese Jungs laufen nach dem eingebauten in inputDirective diejenigen.

Answer 3

Dies scheint

<input type="checkbox" 
     ng-init = "video.checked = !video.hidden" 
     ng-model ="video.checked" 
     ng-change ="video.hidden = !video.checked"/> 

Sie führt eine video.checked Eigenschaft zu arbeiten, die das Gegenteil von video.hidden ist und sobald das Kontrollkästchen Änderungen werden die Werte aktualisiert.

Beispiel hier: http://plnkr.co/edit/7HYht6ubkUUJQ0r3g16m?p=preview

Answer 4

Meine Lösung verwendet eine Richtlinie „negieren“, dass Sie nur an den „Eingang“ hinzufügen. Es ist einfach und es ist nicht notwendig, den Controller zu ändern.

angular 
    .module("<< your module >>") 
    .directive('negate', [ 
     function() { 
      return { 
       require: 'ngModel', 
       link: function (scope, element, attribute, ngModelController) { 
        ngModelController.$isEmpty = function(value) { 
         return !!value; 
        }; 

        ngModelController.$formatters.unshift(function (value) { 
         return !value; 
        }); 

        ngModelController.$parsers.unshift(function (value) { 
         return !value; 
        }); 
       } 
      }; 
     } 
    ] 
); 

es wie folgt verwendet:

<input type="checkbox" negate ng-model="entity.nologin"> 

Answer 5

Ich denke, die einfachste Lösung, die aktiviert oder deaktiviert Wert für eine Checkbox, indem Sie die ng-init-Richtlinie ist innerhalb der Checkbox Eingabeelement wie folgt zu erhalten:

<input type="checkbox" ng-init="video = false" ng-model="video" > 

Dieser den Anfangswert der Checkbox ermöglicht, falsch sein, wenn der Status nicht aktiviert ist. Wenn das Kontrollkästchen deaktiviert ist, wird beim Zurücksenden des Formulars der zurückgegebene Wert (oder die Konsole) falsch sein und nicht "undefiniert", andernfalls wird er bei der Überprüfung als wahr erkannt.

wenn Sie nach Maß Werte für den wahren oder falschen Zustand hinzufügen möchten, können Sie verwenden:

ng-true-value="'custom_true value'" 

und

ng-false-value="'custom_false value'" 

innerhalb des Eingabeelement. wie:

<input type="checkbox" ng-init="video = false" ng-model="video" ng-true-value="'custom_true value'" ng-false-value="'custom_false value'"> 

Answer 6

ist meine Lösung sehr einfach: ng-true-Wert/ng-falsch-Wert und setzte falsch verwenden, um ng-true-Wert und um wahr zu ng-falsch-Wert was die Funktionalität umkehrt.

<input type="checkbox" ng-model="<<-- Your Model -->> " ng-true-value="false" 
 
      ng-false-value="true">