AngularJS中ng-repeat内input加ng-model后ng-value值消失求助

阿华AIGC实验室

2026-5-28

解决AngularJS中添加ng-model后ng-value值消失的问题

这个问题我之前也碰到过，本质是AngularJS里ng-model和ng-value的优先级逻辑导致的——当你同时给<input>设置这两个指令时，ng-model会优先接管输入框的值渲染，如果ng-model绑定的变量没有初始化或者值为空，输入框自然就显示空白了。

下面给你几个可行的解决方案：

1. 直接绑定ng-model到已有属性（最推荐）

因为你的输入框是readonly状态，不需要用户修改，完全可以直接把ng-model绑定到item.BEN_BENCHMARK_GEOGRAPHY，这样既保留了原有值，又符合AngularJS的数据绑定逻辑：

<div ng-repeat="item in benchmarGeographyObj"> 
  <div style="padding-right: 60px;float:left;"> 
    <input readonly style="width: 100%;" type="text" id="unik" ng-model="item.BEN_BENCHMARK_GEOGRAPHY" /> 
  </div> 
</div>

只要item.BEN_BENCHMARK_GEOGRAPHY本身有值，绑定后输入框就会直接显示内容，而且readonly属性会阻止用户修改，完美替代原来的ng-value用法。

2. 手动初始化ng-model绑定的变量

如果你确实需要使用独立的ng-model变量（比如后续可能要修改但暂时设为只读），那要在控制器中提前给这个变量赋值，把item.BEN_BENCHMARK_GEOGRAPHY的值传递过去：
比如在你的控制器里添加这段代码：

$scope.benchmarGeographyObj.forEach(function(item) {
  // 给每个item新增一个用于绑定的属性，比如命名为inputValue
  item.inputValue = item.BEN_BENCHMARK_GEOGRAPHY;
});

然后修改模板中的input：

<div ng-repeat="item in benchmarGeographyObj"> 
  <div style="padding-right: 60px;float:left;"> 
    <input readonly style="width: 100%;" type="text" id="unik" ng-model="item.inputValue" /> 
  </div> 
</div>

这样ng-model绑定的变量有了初始值，输入框就能正常显示内容了。