web-dev-qa-db-fra.com

Définition de ngTrueValue et ngFalseValue sur des nombres

Mise à jour : la question est obsolète pour la dernière Angular, voir le commentaire de tsh sur ce post

J'ai lié une case à cocher à une valeur:

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

La valeur de la case à cocher est définie sur 1 dans le contrôleur:

function Controller($scope) {
    $scope.checkbox = 1
}

Cependant, initialement, la case à cocher ne semble pas cochée. Si je modifie la valeur initiale de $scope.checkbox à "1", Cela fait. ( démo jsfiddle )

J'ai essayé toutes sortes de variantes:

ng-true-value="{{1}}"
ng-true-value="{{Number(1)}}"
ng-true-value="{{parseInt('1')}}"

Aucun ne fonctionne. Comment puis-je faire angular traiter les arguments comme un nombre?

angularjscheckboxangular-ngmodel
35
AlexFoxGill

Vous pouvez utiliser ngChecked , si l'expression est véridique, l'attribut spécial "vérifié" sera défini sur l'élément

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

Et vous pouvez utiliser $scope.$watch pour le convertir en nombre

$scope.$watch(function(){
    return $scope.checkbox;
}, function(){
    $scope.checkbox = Number($scope.checkbox);
    console.log($scope.checkbox, typeof $scope.checkbox);
},true);

[~ # ~] démo [~ # ~]

66
Satpal

J'ai créé une directive pour cela, semble bien fonctionner:

angular.module('app').directive('cdTrueValue', [function() {
  return {
    restrict: 'A',
    require: 'ngModel',
    link: function(scope, element, attrs, ngModel) {
      ngModel.$parsers.Push(function(v){
        return v ? scope.$eval(attrs.cdTrueValue) : scope.$eval(attrs.cdFalseValue);
      });

      ngModel.$formatters.Push(function(value) {
          return value === scope.$eval(attrs.cdTrueValue);
      });
    }
  };
}]);

Usage:

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

DÉMO

6
karaxuna

Les attributs HTML n'ont aucun type. Ils ne peuvent pas contenir autre chose, alors une chaîne, c'est donc toujours une chaîne. Fin de l'histoire.

Vous ne pouvez pas faire la différence entre 1 et "1" dans un attribut HTML. Angular essaie de suivre cela, donc seules les chaînes fonctionneront.

1
TheHippo

La première approche ci-dessus est excellente. Ça marche bien. Vous pouvez également utiliser la directive ng-change si vous avez besoin d'utiliser un modèle dynamique (par exemple lié à l'ID ou au numéro - au cas où vous voudriez travailler avec l'ID que vous ne connaissez pas à l'avance). Passez simplement le modèle en tant que paramètre: ng-change = "fooBar (modèle [ID])", saisissez la fonction du contrôleur et utilisez le nombre (modèle [ID]) de nouveau type. C'est convertir vrai en 1, faux en 0 et vous pouvez travailler avec cela.

0
Newman