AngularJS中input的ng-model无法更新Controller值的问题咨询

嘿，我来帮你捋清楚这个问题～

问题根源 #

你现在的console.log($scope.inputvalue)是写在控制器的初始化函数里的，这个函数只会在控制器第一次加载的时候执行一次（也就是页面刚打开的时候），所以它只会打印初始的空字符串""。之后你在输入框里输入内容时，这段打印代码并不会再次运行，自然看不到更新后的值啦。

不过别担心，你的ng-model其实已经正常工作了——你看页面上的{{ inputvalue }}是不是会跟着输入内容实时变化？这说明输入框的值和$scope.inputvalue的双向绑定已经生效了，只是你没在正确的时机去读取这个值而已。

解决方法 #

这里给你两种常用的方式，让你能获取到输入框的最新值：

方法1：通过按钮点击事件触发读取（推荐，符合业务逻辑） #

既然页面上有个“Check If Too Much”按钮，我们可以给它绑定一个点击事件，每次点击时再去读取并处理$scope.inputvalue：

修改后的HTML（给按钮加ng-click）：

<button class="btn btn-default" ng-click="checkLunch()">Check If Too Much</button>

修改后的JS（添加点击事件处理函数）：

(function () {
'use strict';
angular.module('LunchCheck', [])
.controller('checkiftoomuch', ['$scope', checkiftoomuch]);
function checkiftoomuch($scope){
  $scope.inputvalue = "";
  
  // 新增点击事件处理函数
  $scope.checkLunch = function() {
    console.log($scope.inputvalue); // 现在点击按钮就能看到最新值了
    // 这里还可以加你的业务逻辑，比如拆分菜品数量、判断是否过多等
  }
}
})();

方法2：用$watch监听值的变化 #

如果你想实时监控输入框的每一次变化（比如输入一个字符就打印一次），可以用Angular的$watch方法：

修改后的JS：

(function () {
'use strict';
angular.module('LunchCheck', [])
.controller('checkiftoomuch', ['$scope', checkiftoomuch]);
function checkiftoomuch($scope){
  $scope.inputvalue = "";
  
  // 监听inputvalue的变化
  $scope.$watch('inputvalue', function(newValue) {
    console.log('最新值：', newValue); // 每次输入框变化都会触发
  });
}
})();

这样不管是哪种方式，你都能正确获取到视图传递到控制器里的输入值啦～

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