AngularJS - Установите флажок целое число?

Мне удалось увидеть true или false и вернуть строки в checkboxes с ng-true-value и ng-false-value, но в дополнение, я хочу, чтобы флажок был целым, и если он установлен, он возвращает целое число,

Что должно быть похоже на то, когда я получаю значение из selectbox: http://jsfiddle.net/PuDRm/

Но я не могу получить такую же идею в флажке: http://jsfiddle.net/PuDRm/1/

<input type="checkbox" ng-model="testc" ng-true-value="Yes" ng-false-value="No" ng-change="processtest()" /> Yes

Я полный новичок и пытаюсь понять AngularJS.

Ответ 1

Похоже, вы пытаетесь привязать к двум отдельным значениям флажок.

При выборе вида - это имя, которое вы указали, например. 'test1', а модель - это число, например. '1'. Для флажка вид представляет собой чек или пустой квадрат, а модель - Да/Нет (или все, что вы хотите поместить в ng-true-value и ng-false-value). Там нет места, чтобы он тоже выдавал номер.

Было бы проще позволить модели checkbox быть стандартным (логическим) типом, опуская атрибуты ng-true-value и ng-false-value. Затем вы можете отобразить число и текст на основе этого, как в этом обновленном скрипте: http://jsfiddle.net/D5DGf/1/

Связи {{ ... }} заботятся об обновлении при изменении значений функции, поэтому вам не нужно использовать ng-change.

Что случилось с оригинальным скриптом checkbox?

В функции processtest вы берете модель (Да/Нет) и меняете ее всегда на 8 или 1. Флажок (фактически, ngModel) не понимает этого, поскольку он ожидает, что всегда будет видеть Да/Нет. Поскольку он не знает, что делать, он возвращается к тому, чтобы быть непроверенным.

Вот почему флажок в оригинальной скрипке невозможен.

Ответ 2

Если вы все еще хотите установить число для вашей модели и значение checbox, вы можете сделать это с помощью настраиваемой директивы для синтаксического анализа строки на целое число.

Демо: http://jsfiddle.net/qw5zS/

HTML

<input type="checkbox" ng-model="test" parse-int ng-true-value="1" ng-false-value="0" />

app.directive('parseInt', [function () {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function (scope, elem, attrs, controller) {
            controller.$formatters.push(function (modelValue) {
                console.log('model', modelValue, typeof modelValue);
                return '' + modelValue;
            });

            controller.$parsers.push(function (viewValue) {
                console.log('view', viewValue, typeof viewValue);
                return parseInt(viewValue,10);
            });
        }
    }
} ])

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

Ответ 3

Если вы измените столбец в базе данных от целого до char, он будет работать с

<input type="checkbox" ng-model="testc" ng-true-value="1" ng-false-value="0" ng-change="processtest()" /> Yes

Ответ 4

Другой подход без потребностей ng-model, ng-true-value и ng-false-value. Пусть они будут такими, какие они есть.

angular.module('whateverModule')
    .directive('toggleInt', function () {
        function link ($scope, $element, attr) {
            $element.on('click', function () {
                $scope.$apply(function() {
                    $scope.toggleModel = +!$scope.toggleModel;
                });
            });

            $scope.$watch('toggleModel', function (value) {
                $element.prop('checked', !!value);
            });
        }

        return {
            restrict: 'A',
            scope: {
                toggleModel: '='
            },
            link: link
        };
    });

HTML

<input type="checkbox" toggle-int toggle-model="intModel">
<span>Value: {{intModel}}</span>

Ответ 5

В результате я просто использовал инструкцию if на контроллере.

Пример:

$scope.status = ($scope.status === 1 ? true : false);