AngularJS: Состояние Обратного Флажка

как-то, через магию угловой, если вы используете 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 дал вам строки вместо логических):

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

6 ответов:

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

73

Я не думаю, что есть способ сделать это чисто в шаблоне. Наиболее очевидный способ сделать это-создать новую переменную области, которая вручную дважды привязана к значению модели. Так нравится:

<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-изменением, но это не совсем работает:

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

потому что ng-change не смешивает текущее значение в локальную область вообще. Если вы были в контекст, в котором у вас был доступ к NgModelController, вы могли бы что-то сделать, но для этого вам понадобится пользовательская директива. Было бы нетрудно сделать "инвертированную" директиву атрибута, которая изменяет форматеры и Парсеры NgModel. Я бы предположил, что если вам нужно много перевернутых флажков.

Edit

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

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.

23

Это, кажется, работает

<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

13

мое решение использует директиву "negate", которую вы просто добавляете в"input". Это просто, и нет необходимости менять контроллер.

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

мое решение очень простое: просто использовать ng-true-value/ng-false-value и значение false НГ-значение истина и правда к НГ-значение "ложно", которые изменяют функциональность. 

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

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

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

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

если вы хотите добавить пользовательские сделал значения 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'">
0