AngularJS ng-repeat数组重复问题及动态配料输入项技术咨询

看起来你在使用ng-repeat根据输入的配料数量动态生成输入项时遇到了数组相关的问题——大概率是绑定索引错误、数组未正确初始化导致的重复绑定或数据错乱对吧？我来帮你梳理问题根源，再给出可行的解决方案。

问题根源分析 #

你的代码里用mealCtrl.getNumber(mealCtrl.numberIng)生成循环数据源，然后绑定mealCtrl.ingredient[i].name这类属性。这里的核心问题有两个：

1. 如果getNumber返回的是数字数组（比如[1,2,3]），那么i是数组里的数字值，而非数组索引，这会导致你访问ingredient[i]时，索引可能超出数组实际长度，或者数量变化时重复数字引发绑定混乱。
2. 就算用了track by $index解决了ng-repeat的重复元素报错，但绑定的索引逻辑错误，依然会导致数据无法正确对应到每个输入项。

完整解决方案 #

1. 修正HTML模板的绑定逻辑

把ng-repeat里的绑定从i改成$index，同时确保循环数据源是对应长度的空数组（而非数字数组）：

配料数量？<input type="number" placeholder="number of ingredients" ng-model="mealCtrl.numberIng" min="0">

<ul>
  <li ng-repeat="i in mealCtrl.getNumber(mealCtrl.numberIng) track by $index">
    名称：<input type="text" placeholder="nazwa składnika" ng-model="mealCtrl.ingredient[$index].name">
    生产商：<input type="text" placeholder="manufacturer of ingredient" ng-model="mealCtrl.ingredient[$index].producer">
    重量：<input type="number" placeholder="weight" ng-model="mealCtrl.ingredient[$index].weight" min="0">
  </li>
</ul>

2. 调整控制器逻辑，动态维护配料数组

在控制器里初始化ingredient数组，并监听numberIng的变化，动态调整数组长度，确保每个索引位置都有一个空对象，避免绑定到undefined：

angular.module('yourAppName').controller('MealController', function($scope) {
  var vm = this;
  
  // 初始化默认值
  vm.numberIng = 0;
  vm.ingredient = [];

  // 监听配料数量变化，动态调整数组
  $scope.$watch(function() { return vm.numberIng; }, function(newVal, oldVal) {
    var targetLength = parseInt(newVal) || 0;
    
    // 数量增加时，补充空的配料对象
    while (vm.ingredient.length < targetLength) {
      vm.ingredient.push({
        name: '',
        producer: '',
        weight: 0
      });
    }
    
    // 数量减少时，移除多余的数组元素
    while (vm.ingredient.length > targetLength) {
      vm.ingredient.pop();
    }
  });

  // 返回对应长度的空数组，供ng-repeat循环
  vm.getNumber = function(num) {
    return new Array(parseInt(num) || 0);
  };
});

为什么这样有效？ #

• 用$index作为ingredient数组的索引，确保每个输入项都绑定到数组中对应的位置，不会出现索引错位的问题。
• 通过$watch监听数量变化，动态维护数组长度，保证每个循环项都有对应的对象可以绑定，避免出现Cannot read property 'name' of undefined的报错。
• track by $index确保数组长度变化时，ng-repeat可以正确复用或销毁DOM元素，不会出现重复元素的报错。

如果你之前的getNumber函数是返回数字数组（比如Array.from({length: num}, (_, i) => i+1)），改成返回空数组即可——我们不需要用数组元素的值，只需要循环对应次数就行。

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