Modifiche al modello di input da Intero a Stringa quando modificato

Question

Avere un tipo di intervallo di prezzo/funzionalità di classificazione in base a un modello di input. Al momento del caricamento, quando è impostato dal backend, inizia come un intero, ma quando lo si digita, si trasforma in una stringa. C'è un modo in Angolare per dichiarare il valore di un input come intero?

HTML:

<input type="text" name="sellPrice" id="sellPrice" class="sell-price" data-ng-model="menu.totalPrice" data-ng-change="updateMenuPriceRange()"required> 

JS:

$scope.updateAggregatePricing(); 

if ($scope.menu.totalPrice === 0) { 
    $scope.menuPriceRange = ""; 
} else if ($scope.menu.totalPrice < 10) { 
    $scope.menuPriceRange = "$"; 
} else if ($scope.menu.totalPrice >= 10 && $scope.menu.totalPrice <= 12.50) { 
    $scope.menuPriceRange = "$$"; 
} else if ($scope.menu.totalPrice >= 12.51 && $scope.menu.totalPrice < 15) { 
    $scope.menuPriceRange = "$$$"; 
} if ($scope.menu.totalPrice >= 15) { 
    $scope.menuPriceRange = "$$$$"; 
} else { 
    $scope.menuPriceRange = ""; 
} 

Answer 1

So che sono in ritardo, ma ho pensato di postare questa risposta come altre persone potrebbero ancora essere alla ricerca di alternative.

È possibile risolvere questo problema utilizzando la funzione di collegamento della direttiva AngularJS. Il codice:

var myMod = angular.module('myModule', []); 

myMod.directive('integer', function(){ 
    return { 
     require: 'ngModel', 
     link: function(scope, ele, attr, ctrl){ 
      ctrl.$parsers.unshift(function(viewValue){ 
       return parseInt(viewValue, 10); 
      }); 
     } 
    }; 
}); 

Si potrebbe quindi utilizzare questa direttiva su un elemento di input per assicurarsi che qualsiasi valore immesso, viene analizzato per un numero intero. (ovviamente questo esempio non convalida l'input per fare in modo che ciò che è stato inserito è in realtà un intero, ma si potrebbe implementare facilmente questo con l'uso delle espressioni regolari per esempio)

<input type="text" ng-model="model.value" integer /> 

Maggiori informazioni su questo argomento può essere trovato sui documenti AngularJS sui moduli, attorno alla sezione "Convalida personalizzata": http://docs.angularjs.org/guide/forms.

Modifica: AggiornatoparseInt() chiamata per includere la radice 10, come suggerito da adam0101

Answer 2

Sì, utilizzare l'ingresso di tipo number:

<input type="number" name="sellPrice" ...> 

Answer 3

Finito l'analisi del modello di come un intero prima della mia condizione.

$scope.menu.totalPrice = parseInt($scope.menu.totalPrice, 10); 

Answer 4

Molto simile alla risposta accettata da Yanik, tranne ho provato e non ha funzionato. This version from the AngularJS documentation funziona perfettamente per me, però.

.directive('stringToNumber', function() { 
    return { 
     require: 'ngModel', 
     link: function(scope, element, attrs, ngModel) { 
      ngModel.$parsers.push(function(value) { 
      return '' + value; 
      }); 
      ngModel.$formatters.push(function(value) { 
      return parseFloat(value); 
      }); 
     } 
     }; 
    });