无法从动态创建的输入框获取ng-model值的技术问询

嘿，我之前也踩过这个坑！动态添加输入字段时拿不到ng-model的值，多半是AngularJS的变化检测没跟上，或者绑定方式不对。给你几个亲测有效的解决方案：

AngularJS对数组的变化检测更敏感，尤其是用push()添加新项时。别直接给对象加新属性（Angular可能监听不到），而是把每个动态字段封装成对象存在数组里。

控制器代码 #

app.controller('DynamicFieldCtrl', function($scope) {
  // 初始化空数组，用来存放所有动态字段
  $scope.dynamicFields = [];

  // 添加新字段的方法
  $scope.addNewField = function() {
    // 每个字段是带value属性的对象，确保引用传递
    $scope.dynamicFields.push({ value: '' });
  };

  // 提交时获取所有字段值
  $scope.submitForm = function() {
    console.log($scope.dynamicFields); // 这里能拿到所有输入值！
  };
});

对应HTML模板 #

<div ng-controller="DynamicFieldCtrl">
  <button ng-click="addNewField()">添加输入框</button>
  
  <!-- 用ng-repeat遍历数组，track by $index避免重复项报错 -->
  <div ng-repeat="field in dynamicFields track by $index">
    <input type="text" ng-model="field.value" placeholder="请输入内容">
  </div>

  <button ng-click="submitForm()">提交</button>
</div>

要是你需要用键值对形式的对象存储字段，直接给对象加新属性时，Angular的脏检查机制不会自动触发，这时候可以手动更新：

控制器代码 #

app.controller('DynamicFieldCtrl', function($scope) {
  $scope.formData = {};
  let fieldIndex = 0;

  $scope.addNewField = function() {
    fieldIndex++;
    const newFieldKey = `field_${fieldIndex}`;
    
    // 方法1：用$apply手动触发脏检查
    $scope.$apply(function() {
      $scope.formData[newFieldKey] = '';
    });

    // 方法2：用angular.copy强制更新对象（效果一样）
    // $scope.formData[newFieldKey] = '';
    // $scope.formData = angular.copy($scope.formData);
  };

  $scope.submitForm = function() {
    console.log($scope.formData); // 现在能拿到所有动态字段的值了
  };
});

对应HTML模板 #

<div ng-controller="DynamicFieldCtrl">
  <button ng-click="addNewField()">添加输入框</button>
  
  <div ng-repeat="(key, value) in formData">
    <input type="text" ng-model="formData[key]" placeholder="请输入内容">
  </div>

  <button ng-click="submitForm()">提交</button>
</div>

很多新手会犯这个错：把ng-model直接绑定到数组里的原始类型（字符串、数字），比如$scope.fields = ['', '']，然后用ng-model="field"。这时候输入框的值不会同步到数组，因为原始类型是值传递，Angular跟踪不到变化。

❌ 错误示例：

<!-- 这样绑定无法更新数组 -->
<div ng-repeat="field in fields">
  <input type="text" ng-model="field">
</div>

✅ 正确做法：绑定对象的属性（像解决方案1那样用field.value），因为对象是引用传递，Angular能实时跟踪变化。

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