Angular.js技术问题：下拉切换后输入框预填充数据未全部加载

根据你描述的问题——初次加载预填充正常，但切换下拉选项后部分文本框的预填充数据丢失，结合AngularJS的工作机制，我整理了几个最可能的原因和对应的解决思路：

1. ng-model 与 value/ng-init 的绑定冲突 #

AngularJS中，ng-model 是双向绑定的核心，而 value 属性仅在DOM元素初始化时生效，后续数据更新不会同步到value；ng-init 也只在元素首次渲染时执行一次。如果你的预填充逻辑依赖 value 或 ng-init 给 ng-model 赋值，当下拉切换后DOM元素被复用时（因为track by $index），ng-init 不会再次触发，value 也不会更新，就会导致预填充失败。

解决办法：
完全依赖 ng-model 来管理预填充值，移除 value 和 ng-init。确保切换下拉选项后，x.list 中每个 attr 对应的 ng-model 绑定的变量已经被正确赋值为预填充数据。比如：

<input ng-if="attr.type === 'textbox'" 
       ng-model="attr.preFillValue" 
       name="your-name"
       class="your-class"
       id="your-id"
       ng-minlength="2"
       ng-pattern="/^[a-zA-Z0-9]*$/"
       ng-maxlength="20"
       placeholder="请输入内容"
       mdn-input="text"
       ng-paste="handlePaste($event)"
       ng-required="true"
       ng-disabled="false"
>

同时在切换下拉的逻辑中，确保新的 x.list 里每个textbox类型的attr都已经设置好preFillValue字段，Angular会自动通过ng-model同步到输入框。

2. track by $index 导致的DOM复用问题 #

使用 track by $index 时，Angular会根据索引复用DOM元素，而不是完全重建。比如之前第0位的文本框会被复用给新列表的第0位元素，如果新元素的预填充数据没有及时更新到ng-model绑定的变量，就会显示旧数据或者空值；如果新列表中某个位置原本不是textbox，切换后变成textbox，ng-if 会重建元素，但如果数据没准备好也会出问题。

解决办法：

• 如果每个attr有唯一标识（比如attr.id），把track by $index改成track by attr.id，这样Angular会根据唯一ID来创建/销毁元素，避免复用错误的DOM节点：

<div ng-repeat="attr in x.list track by attr.id">

• 必须用track by $index的话，在切换下拉选项后，手动触发对应ng-model变量的更新，或者在数据更新后强制触发一次digest循环（如果数据是在Angular上下文外更新的）。

3. 数据更新未触发Angular的Digest循环 #

如果切换下拉选项后，更新x.list的逻辑是在Angular的上下文之外执行的（比如用原生JS事件、第三方库回调），Angular不会自动检测到数据变化，导致视图没有同步更新，部分预填充数据无法渲染。

解决办法：
在更新x.list后，调用$scope.$apply()或者$scope.$digest()来触发Angular的变更检测：

// 假设这是你切换下拉后的逻辑
function onDropdownChange(newOption) {
  // 从JSON加载新的列表数据
  x.list = loadNewListFromJSON(newOption);
  // 触发变更检测，确保视图同步
  $scope.$apply();
}

如果是在控制器里，也可以用$timeout包裹数据更新逻辑（即使延迟0秒也能触发digest循环）。

4. ng-if 渲染时机与数据加载不同步 #

当切换下拉选项后，x.list的数据可能还没完全加载完成，ng-if="attr.type === 'textbox'"就已经执行了，导致此时attr的预填充数据还不存在，输入框渲染后没有值。

解决办法：
确保x.list数据完全加载并赋值后，再让ng-repeat开始渲染。可以用ng-if="x.list"来包裹整个循环容器：

<div ng-if="x.list">
  <div ng-repeat="attr in x.list track by $index">
    <!-- 输入控件渲染 -->
  </div>
</div>

这样只有当x.list存在且有数据时，才会开始循环渲染，避免数据未就绪时的空渲染。

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