AngularJS: Reverse checkbox State

Question

Jakoś, dzięki magii Angular, jeśli użyjesz ng-model i zapewnisz mu wartość boolowską, pole wyboru zostanie sprawdzone, jeśli wspomniana wartość logiczna jest prawdziwa, i odznaczona, jeśli jest fałszywa.

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

Choć sam jest dość kłopotliwe, ja rzeczywiście próbuje odwrócić sprawdzenie stanu, ponieważ w przeciwieństwie do np todo gdzie todo.done oznacza pole zostanie zaznaczone, mój model jest bardziej jak todo.incomplete.

Niestety moje pierwsze przypuszczenie nie działa:

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

jestem w sytuacji, w której model został dyktowane do mnie, więc nie można go zmienić i nie chcą mieć do masuj go na kliencie (ponieważ wysyłam obiekty klienta z powrotem na serwer, ponieważ działa on w zaufanym środowisku).

Aktualizacja

To działa w 1.3 i nie daje ciągi (1.2.xxx dał ci struny zamiast logicznych):

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

Answer 1

Można zrobić to teraz bez potrzeby Dyrektywy niestandardowego, kanciasty wsparcia ng-true-value i ng-false-value

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

Twój przykład powinien działać teraz <input type="checkbox" ng-model="video.hidden" ng-true-value="false" ng-false-value="true">

Answer 2

nie sądzę, istnieje sposób, aby rób to czysto w szablonie. Najbardziej oczywistym sposobem osiągnięcia tego jest utworzenie nowej zmiennej zasięgu, która jest ręcznie podwójnie związana z wartością twojego modelu. Więc tak:

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

A w kontrolerze:

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

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

Można prawie prostu używać wiązania z NG-zmiany w jedną stronę, ale to nie do końca pracy:

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

Ponieważ ng-change w ogóle nie miesza aktualnej wartości do zakresu lokalnego. Jeśli byłeś w sytuacji, w której miałeś dostęp do NgModelController, mógłbyś coś zrobić, ale potrzebujesz do tego niestandardowej dyrektywy. Nie byłoby trudno stworzyć "odwróconą" dyrektywę atrybutów, która modyfikuje formatery i parsery NgModel. Zasugeruję, że jeśli potrzebujesz dużo odwróconych pól wyboru.

Edit

dla potomności, dokonywania "odwróconego" atrybut jest super prosty, równie dobrze może to zrobić. Wytwarzanie dyrektyw zawsze wydaje się być początkiem bólu, ale tak naprawdę jest to metoda Angular.

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

może trzeba ustawić priorytet też, czy „unshift” zamiast push, aby upewnić się, że ci faceci są prowadzone po wbudowanej te inputDirective.

Answer 3

To wydaje się działać

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

Wprowadza video.checked właściwość, która jest przeciwieństwem video.hidden i tak szybko, jak zmienia się pole wyboru wartości są aktualizowane.

Przykład tutaj: http://plnkr.co/edit/7HYht6ubkUUJQ0r3g16m?p=preview

Answer 4

Moje rozwiązanie używa dyrektywą „negować”, które po prostu dodać do „wejścia”. To proste i nie ma potrzeby zmiany kontrolera.

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

Używaj go tak:

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

Answer 5

Myślę, że najprostsze rozwiązanie, aby uzyskać zaznaczone lub odznaczone wartość do wyboru jest dodanie dyrektywy ng-startowy wewnątrz elementu wejściowego pole wyboru w następujący sposób:

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

Umożliwia to wartość początkową pole wyboru być fałszywe, gdyby państwo nie zostało sprawdzone. Po przesłaniu formularza, jeśli pole wyboru nie jest zaznaczone, wartość, która zwraca (lub konsola) będzie fałszywa, zamiast "niezdefiniowana", w przeciwnym razie sprawdzenie będzie prawdą.

jeśli chcesz dodać niestandardowy dokonane wartości prawdziwej lub fałszywej stanie, można użyć:

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

i

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

wewnątrz elementu wejściowego. jak:

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

Answer 6

Moje rozwiązanie jest bardzo proste: wystarczy użyć NG-prawdziwa wartość/NG-fałszywie wartość i ustawić fałszywe NG-prawdziwą wartość i prawdziwe ng-fałsz wartość który odwróci funkcjonalność.

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