AngularJS循环内绑定输入框：如何获取修改后的country值？

你当前的问题出在绑定方式上：使用value="{{country.name}}"属于单向插值绑定，输入框的内容修改不会同步回country对象，因此saveCountryName方法中拿到的始终是原始数据。

修正方案 #

将输入框的value属性替换为AngularJS的双向绑定指令ng-model，这样输入框的内容会实时同步到country.name上，触发ng-blur时就能拿到修改后的数值。

修正后的HTML代码

<div ng-repeat="country in countries">
  <input ng-blur="saveCountryName(country)" type="text" ng-model="country.name">
</div>

控制器代码（无需修改）

$scope.saveCountryName = (country) => {
  console.log(country); // 此时输出的是修改后的country对象
}

原理说明 #

ng-model是AngularJS核心的双向绑定指令，它会建立输入框与country.name之间的数据同步通道：用户修改输入框内容时，country.name会自动更新；反之，country.name变化时输入框内容也会同步刷新。当ng-blur事件触发时，country对象已经包含了最新的修改值，因此能正确获取到更新后的内容。

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