68

不知何故，通过 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">
4

6 回答 6

82

您现在可以做到这一点，而无需自定义指令、角度支持ng-true-value和ng-false-value

https://docs.angularjs.org/api/ng/input/input[复选框]

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

于 2014-12-14T19:30:40.417 回答
23

我认为没有办法纯粹在模板中做到这一点。实现这一点的最明显方法是创建一个新的范围变量，该变量手动双重绑定到您的模型值。就像：

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

可能还需要设置优先级，或者“unshift”而不是 push，以确保这些人在内置 inputDirective 之后运行。

于 2012-12-18T04:33:31.327 回答
14

这似乎有效

<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

于 2012-12-18T04:44:17.143 回答
5

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

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">
于 2014-03-20T10:15:40.590 回答
2

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

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

于 2017-09-20T01:19:55.353 回答
0

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

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

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

如果要为真或假状态添加自定义值，可以使用：

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

和

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

在输入元素内部。像 ：

<input type="checkbox" ng-init="video = false" ng-model="video" ng-true-value="'custom_true value'" ng-false-value="'custom_false value'">
于 2017-08-08T10:39:35.300 回答