Angularjs ng-model с номером ввода

Question

Я пытаюсь получить вход [номер] в моем контроллере.

Я нашел решение, которое добавило $ scope. $ Watch на входе.

Я попробовал, но теперь мой номер «NaN».

<div class="offerText"> 
    <label class="form-inline" ng-if="!admin">What will it cost ? <input type="number" class="form-control" ng-model="estimation"/></label>  
    <label class="form-inline">Comments <textarea rows="3" cols="50" class="form-control" ng-model="comments"></textarea></label> 
</div> 

И в мой контроллер

$scope.$watch('estimation', function (val, old) { 
     $scope.estimation = parseFloat(val); 
    }); 

Thx для вашей помощи!

Answer 1

Вам не нужны часы. Проблема здесь в том, что вход находится внутри директивы ng-if, которая определяет ее собственную область. Оценка сохраняется в области ng-if вместо сохранения в области контроллера.

Правило или большой палец: всегда есть точка в вашей ng-модели.

В контроллере добавьте

$scope.data = {}; 

И в HTML, используйте

ng-model="data.estimation" 

и

ng-model="data.comments" 

Answer 2

Test, если новое значение не определено или пустое или что-то falsy, это происходит потому, что угловые петли несколько раз через в Watchs и моделей, этот процесс вызова грязный проверки

$scope.$watch('estimation', function (val, old) { 
     if (!val) { 
      return; 
     } 
     $scope.estimation = parseFloat(val); 
    }); 

Answer 3

Когда значение "" или null вы всегда получите parseFloat результат, как NaN

$scope.$watch('estimation', function (val, old) { 
    return !isNaN(val) ? parseFloat(val): 0; //considering default value is 0 
}); 

Другой возможный путь будет получить значение на изменения, используя ng-change директиву.

<div class="offerText"> 
    <label class="form-inline" ng-if="!admin">What will it cost ? <input type="number" class="form-control" ng-model="estimation" ng-change="changedEstimation(estimation)"/></label>  
    <label class="form-inline">Comments <textarea rows="3" cols="50" class="form-control" ng-model="comments"></textarea></label> 
</div> 

Контроллер

$scope.changedEstimation = function(val){ 
    return !isNaN(val) ? parseFloat(val): 0; 
}