Dlaczego dane wejściowe typu = "liczba" nie pokazują aktualizacji powiązanej wartości?

Question

Zestaw formantów wejściowych HTML są zobowiązane do testVar:

<div ng-app> 
    <div ng-controller="TestCtrl"> 
     <input type="text" ng-model="testVar"> 
     <input type="number" min="1" max="10" ng-model="testVar"> 
     <input type="range" min="1" max="10" ng-model="testVar"> 
     <button ng-click="testVar = 5">set to 5</button>    
    </div> 
</div> 

Początkowo wszystkie kontrole wejściowe pokazują tę wartość zgodnie z oczekiwaniami, ale type = „number” wejście staje się puste, gdy testVar zostanie zmieniona poprzez type =” zakres "lub typ =" tekst ". Ustawienie wartości testVar programowo powoduje oczekiwane zachowanie: wszystkie wejścia pokazują zaktualizowaną wartość.

Kwestia Świadczy o tym prostym przypadku: http://jsfiddle.net/7cbYp/

Dlaczego tak się dzieje i jak to może być stałe?

Answer 1

szybkie ustalenie byłoby stworzenie dyrektywy i obserwować zmiany w modelu i elementu HTML samego

HTML

<input type="number" min="1" max="10" fix="testVar"> 

JS

var App = angular.module('App', []); 
App.directive('fix', function(){ 
    return{ 
     link: function(scope, elem, attrs){ 
      scope.$watch(attrs.fix, function(v){ 
       if(typeof v === 'string') v = parseInt(v, 10); 
       elem.val(v); 
      }); 
      elem.bind('change', function(){ 
       scope[attrs.fix] = elem.val(); 
       scope.$digest(); 
      }); 
     } 
    }; 
}); 

Mam tylko ją przetestowany w Chrome i działa.

jsfiddle: http://jsfiddle.net/jaimem/HLnqt/3/

Uwaga: nie musi być bardziej przejrzysty sposób to zrobić.

Answer 2

dane wejściowe [typ = zakres] konwertuje typ danych modelu na ciąg, którego nie można wyświetlić na wejściu [typ = liczba].

podobny problem z rozwiązaniem tutaj.

Angular Data Binding - Input type="number"