AngularJS: Reverse Checkbox State

I don't think there's a way to do this purely in the template. The most obvious way to accomplish this is create a new scope variable that's manually double-bound to your model value. So like:

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

And in your controller:

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

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

You could almost just use one-way binding with an ng-change, but that doesn't quite work:

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

Because ng-change doesn't mix the current value into the local scope at all. If you were in a context where you had access to the NgModelController you could do something, but you'd need a custom directive for that. Wouldn't be hard to make an "inverted" attribute directive that modifies the NgModel's formatters and parsers. I'd suggest that if you need lots of inverted checkboxes.

Edit

For posterity, making an "inverted" attribute is super simple, might as well just do that. Making directives always seems like a pain at first, but it really is the Angular way.

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

Might need to set the priority too, or "unshift" instead of push, to make sure these guys run after the built-in inputDirective ones.

This seems to work

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

It introduces a video.checked property that's the opposite of video.hidden and as soon as the checkbox changes the values are updated.

Example here: http://plnkr.co/edit/7HYht6ubkUUJQ0r3g16m?p=preview

My solution uses a directive "negate", that you just add to the "input". It's simple, and there is no need to change the controller.

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

Use it like this:

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

My Solution is Very simple: Just use ng-true-value / ng-false-value and set false to ng-true-value and true to ng-false-value which will reverse the functionality.

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

I think the simplest solution to get the checked or unchecked value for a checkbox is by adding the ng-init directive inside the checkbox input element as follows:

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

This enables the initial value of the checkbox to be false, were the state is unchecked. On submitting the form, if the checkbox is unchecked the value that returns (or console) will be false, instead of 'undefined', else upon checking it will be true.

if you want to add custom made values for the true or false state, you can use:

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

and

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

inside the input element. like :

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