AngularJS:反向复选框状态

Question

不知何故,通过Angular的魔力,如果你使用ng-model并提供一个布尔值,如果所述布尔值为真,则检查你的复选框,如果为假则取消选中.

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

虽然仅此一点令人费解,但我实际上是试图反转已检查的状态,因为与todo示例不同,这todo.done意味着框被检查,我的模型更像是todo.incomplete.

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

<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的上下文中执行某些操作,但是您需要一个自定义指令.制作一个修改NgModel的格式化程序和解析器的"反向"属性指令并不难.我建议如果你需要很多倒置的复选框.

编辑

对于后代来说,制作"倒置"属性非常简单,不妨这样做.制定指令一开始似乎总是很痛苦,但它确实是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; });
    }
  };
});

可能还需要设置优先级,或者"不移动"而不是push,以确保这些人在内置的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

我的解决方案使用指令“否定”，您只需将其添加到“输入”。很简单，不需要更换控制器。

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">