AngularJS：反转checkbox状态

不知何故，通过Angular的魔力，如果你使用ng-model并提供一个布尔值，你的checkbox将被检查，如果布尔值为true，并且如果为false，则不选中。

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

虽然这本身是相当莫名其妙的，我实际上是试图扭转检查的状态，因为不像todo.done意味着框被检查的todo示例，我的模型更像todo.incomplete 。

不幸的是我的第一个猜测没有奏效：

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

我处于一个模式已被口授给我的位置，所以我不能改变它，不想在客户端上按摩它（因为我发送客户端对象回到服务器，因为它是在可信的环境中运行）。

更新

这工作在1.3，不给你的string（1.2.xxx给你的string，而不是布尔）：

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

Answer 1

您现在可以不需要自定义指令，angular度支持ng-true-value和ng-false-value

https://docs.angularjs.org/api/ng/input/input%5Bcheckbox%5D

你的例子应该现在工作<input type="checkbox" ng-model="video.hidden" ng-true-value="false" ng-false-value="true">

Answer 2

我不认为有一种方法可以在模板中完全做到这一点。 最明显的方法是创build一个新的范围variables，手动双重绑定到您的模型值。 如此：

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

在您的控制器中：

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

你几乎可以使用ng-change的单向绑定，但是这不起作用：

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

因为ng-change不会将当前值混合到本地范围中。 如果你在一个你可以访问NgModelController的环境中，你可以做一些事情，但是你需要一个自定义的指令。 不难做出修改NgModel的格式化器和分析器的“倒置”属性指令。 我build议，如果你需要大量的倒置checkbox。

编辑

对于后代来说，制造一个“倒置”的属性是非常简单的，不妨做到这一点。 制定指令起初似乎是一种痛苦，但确实是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; }); } }; }); 

可能需要设置优先级，或者“不换”而不是推，以确保这些家伙在内置的inputDirective之后运行。

Answer 3

这似乎工作

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

它引入了与video.checked相反的video.checked属性，只要checkbox更改值更新。

示例： http : //plnkr.co/edit/7HYht6ubkUUJQ0r3g16m?p=preview

Answer 4

我的解决scheme使用一个指令“否定”，你只需要添加到“input”。 这很简单，并且不需要改变控制器。

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

像这样使用它：

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

Answer 5

我认为最简单的解决scheme来取得checkbox的选中或取消选中的值是通过添加checkboxinput元素中的ng-init指令，如下所示：

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

这使checkbox的初始值为false，如果状态未被选中。 在提交表单时，如果取消选中checkbox，则返回（或控制台）的值将为false，而不是“未定义”，否则在检查时为true。

如果您想为true或false状态添加自定义的值，可以使用：

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

和

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

在input元素内部。 喜欢 ：

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

Answer 6

我的解决scheme非常简单：只需使用ng-true-value / ng-false-value并将false设置为ng-true-value，将true设置为ng-false-value即可颠倒function。

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