AngularJS: обратное состояние флажка

Каким-то образом, используя магию Angular, если вы используете ng-model и предоставляете ему логическое значение, ваш флажок будет проверяться, если указанное логическое значение истинно и не отмечено, если false.

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

В то время как это само по себе довольно сложно, я фактически пытаюсь изменить проверенное состояние, потому что в отличие от примера todo, где todo.done означает, что флажок установлен, моя модель больше похожа на todo.incomplete.

К сожалению, мое первое предположение не сработало:

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

Я нахожусь в положении, когда модель была продиктована мне, поэтому я не могу ее изменить и не хочу, чтобы ее массировать на клиенте (потому что я отправляю объекты клиента обратно на сервер, поскольку он работает в надежной среде).

Обновление

Это работает в 1.3 и не дает вам строк (1.2.xxx дал вам строки вместо booleans):

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

Ответ 1

Вы можете сделать это без необходимости настраиваемой директивы, angular support 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">

Ответ 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. Я бы предположил, что если вам нужно много перевернутых флажков.

Edit

Для потомков создание "перевернутого" атрибута очень просто, возможно, просто сделайте это. Вначале директивы всегда кажутся болью, но на самом деле это способ 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, чтобы убедиться, что эти парни запускаются после встроенных входных директив.

Ответ 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

Ответ 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">

Ответ 5

Я думаю, что самым простым решением для получения отмеченного или непроверенного значения для флажка является добавление директивы ng-init внутри элемента ввода флажка следующим образом:

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

Это позволяет установить начальное значение флажка, если состояние не отмечено. При отправке формы, если флажок снят, значение, которое возвращает (или консоль), будет ложным, вместо "undefined", иначе при проверке оно будет истинным.

если вы хотите добавить настраиваемые значения для истинного или ложного состояния, вы можете использовать:

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

Ответ 6

Мое решение очень просто: просто используйте 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">