AngularJS: Ters Checkbox Durum

Question

Bir şekilde, Açısal'nın büyüsüyle, ng-model kullanırsanız ve bunu bir boole sağlarsanız, söz konusu boolean doğruysa onay kutusu işaretlenir ve yanlışsa işaretlenmemiş olur.

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

yalnız bu oldukça şaşırtıcı olsa da, aslında, çünkü todo.done işaretli alır kutusu anlamına todo örneğin tersine, kontrol durumunu tersine çevirmek için çalışıyorum, benim modeli daha todo.incomplete gibidir.

Ne yazık ki benim ilk tahminim işe yaramadı:

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

manken bana dikte edilmiş bir konumda değilim, bu yüzden onu değiştiremez ve zorunda kalmak istemiyoruz İstemciye masaj yapın (çünkü istemci nesnelerini sunucuya geri gönderiyorum çünkü güvenilir bir ortamda çalışıyor).

Güncelleme

Bu 1.3 çalışır ve size dizeleri (1.2.xxx yerine boole ipleri verdi) vermez: Bir yolu var sanmıyorum

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

Answer 1

Sen yapabileceği artık özel yönetmeliğinin ihtiyacı, açısal destek ng-true-value ve ng-false-value olmadan

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

senin örneğin şimdi çalışmalı

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

Bu onay kutusu başlangıç ​​değerini sağlar

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

:

Answer 2

Bunu sadece şablonda yapın. Bunu gerçekleştirmenin en belirgin yolu, model değerinize manuel olarak çift bağlanan yeni bir kapsam değişkeni oluşturmaktır.

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

Ve denetleyicisi: Yani böyle

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

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

Neredeyse sadece ng-değişimle bağlayıcı tek yönlü kullanabilirsiniz, ama bu oldukça çalışır değil:

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

ng-change geçerli değeri yerel kapsamda hiç karıştırmaz. Eğer NgModelController'a erişebildiğin bir bağlamda olsaydın, bir şeyler yapabilirdin, ama bunun için özel bir direktife ihtiyacın olurdu. NgModel'in formatlarını ve ayrıştırıcılarını değiştiren bir "ters" öznitelik yönergesi yapmak zor olmaz. Çok sayıda ters çevrilmiş onay kutularına ihtiyacınız varsa öneririm. bir "ters" özelliğini yapma kuşaklar için

Düzenleme

, süper basit, hem de sadece o yapabilir. Direktiflerin yapılması her zaman ilk başta bir acı gibi gözükür, ama bu gerçekten Açısal yoldur.

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

emin olmak için, yerine itme "unshift" çok öncelik ayarlamak gerekir ya Olabilir sonra çalıştırmak bu adamlar yerleşik inputDirective olanlar.

Answer 3

Bu

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

Bu onay kutusu değerleri güncellenir değiştirir en kısa sürede video.hidden tersi bir video.checked özelliği tanıtır çalışıyor gibi görünüyor.Burada

Örnek: http://plnkr.co/edit/7HYht6ubkUUJQ0r3g16m?p=preview

Answer 4

Çözümümün sadece "giriş" eklediğiniz bir yönerge "olumsuzlamak" kullanır. Bu basit ve denetleyiciyi değiştirmeye gerek yok.

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

böyle kullanın:

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

Answer 5

en basit çözüm, onay kutusu için kontrol ya da kontrol değeri aşağıdaki gibi kutusunun giriş elemanı içinde ng-init yönergesi eklenerek elde etmenin düşünmek yanlış ol, devlet kontrol edilmedi. Formu gönderirken, onay kutusu işaretli değilse, döndüren (veya konsol) değeri yanlıştır, yerine "undefined", aksi takdirde bu doğru olur. Eğer doğru veya yanlış devlet için özel yapılmış değerler eklemek isterseniz

, şunları kullanabilirsiniz:

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

ve

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

giriş öğesinin içine. gibi:

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

Answer 6

My Çözüm Çok basit: Sadece ng-gerçek değer/ng-yanlış-değeri ve ng-gerçek değer yanlış ve gerçek set ng-yanlış-değeri kullanın işlevselliği tersine çevirir.

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