AngularJS - Assegnare una casella di controllo a un numero intero?

Question

Sono stato in grado di vedere true o false e restituire stringhe nelle caselle di controllo con ng-true-value e ng-false-value, ma in addizionale, voglio dare un check-in a un intero e se è selezionato restituisce un intero.

che dovrebbe essere simile a quando ricevo un valore da una selectbox: http://jsfiddle.net/PuDRm/

Ma io non riesco a ottenere la stessa idea in una casella di controllo: http://jsfiddle.net/PuDRm/1/

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

Sono un newbie totale e cercando di capire AngularJS.

Answer 1

Sembra che si stia tentando di associare a due valori separati con la casella di controllo.

Nella selezione la vista è il nome che hai dato ad es. 'test1', e il modello è il numero, ad es. '1'. Per la casella di controllo, la vista è un segno di spunta o un quadrato vuoto e il modello è Sì/No (o qualsiasi cosa tu voglia inserire nello ng-true-value e nello ng-false-value). Non c'è spazio per averne anche un numero.

Sarebbe più semplice lasciare che il modello di casella di controllo sia il tipo predefinito (booleano) omettendo gli attributi ng-true-value e ng-false-value. È quindi possibile visualizzare il numero e il testo sulla base di questo come in questo violino aggiornamento: http://jsfiddle.net/D5DGf/1/

I {{ ... }} attacchi prendono cura di aggiornare quando i valori della funzione a modifiche, pertanto non è necessario usare ng-change sia.

---

Cosa c'era di sbagliato con il violino casella di controllo originale?

Nella funzione processtest si sta assumendo il modello (si/no) e la modifica di essere sempre o 8 o 1. La casella di controllo (infatti, ngModel) non lo capisce poiché si aspetta di vedere sempre Sì/No. Dato che non sa cosa fare, torna a non essere controllato.

Ecco perché la casella di controllo nel violino originale non è selezionabile.

Answer 2

Se si desidera impostare ancora un numero per il modello e il valore di checbox, è possibile farlo con una direttiva personalizzata per analizzare la stringa su intero.

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

Ma questo potrebbe non essere una buona pratica utilizzando casella di controllo, si dovrebbe stare con il default comportamento a d usa un valore booleano, quindi formatta la vista come vuoi, ma mantieni i tuoi dati puliti.

Answer 3

Se si modifica la colonna nel database da integer a char, funziona con

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

Answer 4

Un altro approccio, senza le necessità di ng-model, ng-vero-value e ng-falso-valore. Manteniamo quelli come sono.

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> 

Answer 5

quello che ho finito per fare stava solo usando un'istruzione if sul controller.

Esempio:

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