AngularJS - Donne une case à cocher un entier?

J'ai pu voir de vraies ou fausses et renvoient des chaînes dans les cases à cocher avec ng-vrai-valeur et ng-faux-value, mais en plus, je veux donner la case à cocher d'un entier et si elle est cochée, elle renvoie un entier.

Qui devrait être similaire à lorsque je reçois une valeur à partir d'une selectbox: http://jsfiddle.net/PuDRm/

Mais je n'arrive pas à obtenir la même idée dans une case: http://jsfiddle.net/PuDRm/1/

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

Je suis un total newbie et d'essayer de comprendre AngularJS.

source d'informationauteur pau

  1. 10

    Il semble que vous essayez de se lier à deux valeurs distinctes avec la case à cocher.

    Dans la sélection de la vue est le nom que vous avez donné par exemple 'test1', et le modèle est le numéro, par exemple '1'. Pour la case, la vue est un chèque ou un carré blanc, et le modèle est Oui/Non (ou ce que vous voulez mettre dans le ng-true-value et ng-false-value). Il n'y a pas de place pour l'avoir à produire un nombre trop.

    Il serait plus simple de laisser la case modèle par défaut (boolean) type en omettant la ng-true-value et ng-false-value attributs. Vous pouvez ensuite afficher le numéro et le texte en fonction de ce que dans cette mise à jour du violon: http://jsfiddle.net/D5DGf/1/

    La {{ ... }} liaisons de prendre soin de la mise à jour lorsque la fonction de la modification des valeurs, de sorte que vous n'avez pas besoin d'utiliser ng-change.

    Ce qui n'allait pas avec l'original de la case de violon?

    Dans le processtest fonction vous prenez le modèle (Oui/Non) et la modifier pour toujours être 8 ou 1. La case à cocher (en fait, ngModel) ne comprend pas ce qu'il attend de la voir toujours Oui/Non. Comme il ne sait pas quoi faire, il revient à être décochée.

    C'est pourquoi la case à cocher à l'origine, le violon est incontrôlables.

  2. 8

    Si vous voulez continuer à utiliser ensemble un numéro de modèle et de checbox valeur, vous pourriez le faire avec un custom directive pour analyser la chaîne de retour à l'entier.

    Démo: http://jsfiddle.net/qw5zS/

    html

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

    js

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

    Mais ce ne serait pas une bonne pratique à l'aide de case à cocher, vous devez rester avec le comportement par défaut et utiliser un booléen, le format de la vue comme vous voulez, mais gardez vos données propre.

  3. 5

    Si vous modifiez la colonne dans la base de données integer char, il fonctionne avec 

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

  4. 1

    Une autre approche, sans le besoin de ng-model, ng-vrai-valeur et ng-faux-valeur. Gardons ces la façon dont ils sont.

    js

    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. 0

    Ce que j'ai fait était juste à l'aide d'une instruction if sur le contrôleur.

    Exemple: 

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