Question

不知何故，通过Angular的魔力，如果你使用ng-model并为它提供一个布尔值，你的复选框将被检查，如果所述布尔值为真，并且如果为假则不选中。

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

虽然仅此一点令人困惑，但我实际上是在尝试撤销已检查状态，因为与todo示例不同，todo.done表示框被选中，我的模型更像todo.incomplete。< / p>

不幸的是我的第一次猜测不起作用：

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

我处于一个模型已经由我指定的位置，因此我无法更改它并且不想在客户端上按摩它（因为我将客户端对象发送回服务器，因为它在受信任的环境中运行。）

更新

这适用于1.3，并没有给你字符串（1.2.xxx给你字符串而不是布尔值）：

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

Answer 1

您现在无需自定义指令即角度支持ng-true-value和ng-false-value

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

您的示例现在应该可以使用了 <input type="checkbox" ng-model="video.hidden" ng-true-value="false" ng-false-value="true">

Answer 2

我认为没有办法纯粹在模板中执行此操作。实现此目的最明显的方法是创建一个新的范围变量，该变量可以手动双重绑定到模型值。所以喜欢：

<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的上下文中执行某些操作，但是您需要一个自定义指令。不会很难做出反转的＆＃34;属性指令，用于修改NgModel的格式化程序和解析器。我建议如果你需要很多倒置的复选框。

修改

对后代来说，做一个＆＃34;倒置＆＃34;属性非常简单，不妨这样做。制定指令起初看起来总是很痛苦，但它确实是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; }); } }; });

也可能需要设置优先级，或者＆＃34; unshift＆＃34;而不是推动，以确保这些人在内置的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.hidden属性，只要复选框发生更改，值就会更新。

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

Answer 4

我的解决方案使用指令＆＃34;否定＆＃34;，您只需添加到＆＃34;输入＆＃34;。这很简单，无需更换控制器。

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

我的解决方案非常简单：只需使用 ng-true-value / ng-false-value 并将false设置为ng-true-value，将true设置为ng-假值将反转功能。

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

Answer 6

我认为获取复选框的已检查或未选中值的最简单方法是在复选框输入元素中添加ng-init指令，如下所示：

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

如果未选中状态，则会使复选框的初始值为false。在提交表单时，如果取消选中该复选框，则返回（或控制台）的值将为false，而不是＆＃39; undefined＆＃39;，否则在检查时将为真。

如果要为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'">

AngularJS：反向复选框状态

6 个答案: