Проблема отображения значения в поле Номер AngularJS

Question

Я пытаюсь связать значение, которое типа string, когда речь идет от controller в numeric input поле, как следующее:

<input type="number" ng-model="detail.Value">

Поскольку detail.Value имеет тип string, значение I не отображается (я думаю).

Я не могу изменить тип свойства Value на int.

Что я могу сделать в представлении, чтобы отобразить значение в поле числа?

Answer 1

Заверните с parseFloat:

detail.Value = parseFloat(detail.Value); 

Demo Fiddle

Answer 2

Вы можете передать это значение методы на контроллере, который будет делать разбор (и назначение модели) или если вы действительно хотите это сделать в HTML, вы можете назначить метод разбора для области в контроллере ($scope.parseFloat = parseFloat;) и проанализировать в ng-init. Что-то вроде этого: ng-init="value = parseFloat(detail.Value)", а затем ng-model="value".

Answer 3

$scope.isNumeric = function isNumber(number) {    // function to test the data can be convert to numeric 
    return !isNaN(parseFloat(number)) && isFinite(number); 
} 

...success(data) {  // after getting the data from serverside 
    var formData = data.formDataWithNumeric; // get the form data 
    for (key in formData) {     //iterate through the data 
     var isNumericData = $scope.isNumeric(formData[key]); // check data can be convert to a numeric 
     if(isNumericData) { 
      formData[key] = Number(formData[key]); // reassign the numeric value instead of string value 
     } 
    } 
} 

вы можете попробовать что-то вроде этого

Answer 4

Вот небольшая директива, чтобы заставить значение модели, чтобы быть номером

function forceNumber ($parse) { 
 
    return { 
 
     restrict: 'A', 
 
     require: 'ngModel', 
 
     link: function (scope, elem, attrs, ctrl) { 
 
      var getter = $parse(attrs.ngModel); 
 
      var setter = getter.assign; 
 
      var remListner = attrs.$observe('ngModel', function (val) { 
 
       var value = getter(scope); 
 
       if (typeof value !== 'number') { 
 
       setter(scope,+value); 
 
       } 
 
       // remove listner, no need to keep watching! 
 
       remListner(); 
 
      }); 
 
     } 
 
    }; 
 
    }

вы можете увидеть его в действии в this small plunker

Надеются, что это помогает вам, С уважением Sander