angularjs - validar - obtener el valor de un checkbox angular

Estableciendo ngTrueValue y ngFalseValue en los números

Question

Actualización : la pregunta es obsoleta para la última versión de Angular, consulte el comentario de tsh en esta publicación

He vinculado una casilla de verificación a un valor:

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

El valor de la casilla de verificación está establecido en 1 en el controlador:

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

Sin embargo, inicialmente, la casilla de verificación no aparece marcada. Si cambio el valor inicial de $scope.checkbox a "1" , lo hace. ( jsfiddle demo )

He intentado todo tipo de variaciones:

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

Ninguno de ellos funciona. ¿Cómo puedo hacer angular tratar los argumentos como un número?

Answer 1

El primer acercamiento arriba es genial. Eso funciona bien También puede usar la directiva ng-change si necesita usar un modelo dinámico (por ejemplo, un enlace con ID o número, en caso de que quiera trabajar con una ID que no sepa con anticipación). Simplemente pase el modelo como parámetro: ng-change = "fooBar (modelo [ID])", capture en la función del controlador y use el número (modelo [ID]) re-type. Eso es convertir verdadero como 1, falso como 0 y puedes trabajar con esto.

Answer 2

He creado una directiva para eso, parece funcionar bien:

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

Uso:

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

DEMO

Answer 3

Los atributos HTML no tienen ningún tipo. No pueden contener nada más, luego una cuerda, por lo que siempre es una cadena. Fin de la historia.

No puede diferenciar entre 1 y "1" en un atributo HTML. Angular intenta mantenerse al día con eso, por lo que solo las cadenas funcionarán.

Answer 4

Puede usar ngChecked , si la expresión es verdadera, entonces el atributo especial "checked" se establecerá en el elemento

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

Y puede usar $scope.$watch para convertirlo a número

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

DEMO