AngularJS中ngModel onChange移除前置零输入框不更新问题求助

问题原因 #

核心问题出在type="number"输入框的特性上：当你在ng-change中修正模型值（移除前置零、强制非负）后，虽然$scope.number.num已经是正确的数字，但浏览器对number类型输入框的显示逻辑不会自动同步模型的格式化结果——输入框会保留用户输入的原始带前置零的字符串，直到Angular触发视图刷新。

解决方案 #

方案1：用$timeout触发视图同步 #

注入$timeout服务，让Angular在下一个digest周期更新视图，确保输入框显示与模型值一致：

angular.module('app1', [])
.controller('FormCtrl', function($scope, $timeout) {
    $scope.number = {'num': 0};
    $scope.numberOnChange = function() {
      let parsedNum = parseInt($scope.number.num.toString(), 10);
      // 处理非数字和负值
      $scope.number.num = isNaN(parsedNum) || parsedNum < 0 ? 0 : parsedNum;
      
      // 触发视图同步
      $timeout(() => {
          $scope.number.num = $scope.number.num;
      }, 0);
    }
});

方案2：手动操作ngModel控制器（更高效） #

直接通过ngModel控制器更新视图值并渲染，避免依赖$timeout：
先修改HTML给输入框添加标识：

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app=app1 ng-controller="FormCtrl">
    <form>
        <input type=number ng-model="number.num" ng-change="numberOnChange()" id="numInput">
    </form>
</div>

再更新JS代码：

angular.module('app1', [])
.controller('FormCtrl', function($scope, $element) {
    $scope.number = {'num': 0};
    // 获取输入框的ngModel控制器
    const numInputEl = $element.find('#numInput')[0];
    const ngModel = angular.element(numInputEl).controller('ngModel');
    
    $scope.numberOnChange = function() {
      let parsedNum = parseInt($scope.number.num.toString(), 10);
      $scope.number.num = isNaN(parsedNum) || parsedNum < 0 ? 0 : parsedNum;
      
      // 手动更新视图并渲染
      ngModel.$setViewValue($scope.number.num.toString());
      ngModel.$render();
    }
});

方案3：改用文本输入框（更灵活） #

如果业务允许，将输入框改为type="text"，输入框会完全同步模型值，无需额外处理：

<input type=text ng-model="number.num" ng-change="numberOnChange()">

JS代码保持原有逻辑即可，输入框会直接显示处理后的无前置零数字。

内容的提问来源于stack exchange，提问作者Kevin Yao