AngularJS：如何将循环迭代器索引传入函数存储表格输入值？

这是处理动态表单输入、精准更新数组对应位置的常规操作，完全能把索引和输入值一起传给updateRedScore函数。下面给你两种常见场景的实现示例：

原生JavaScript场景 #

假设你是通过原生JS动态生成表格行，那在创建输入框时，直接把当前行的索引绑定到输入事件上即可：

// 初始化空数组
const redScores = [];
// 假设你已经有生成表格的逻辑，比如循环创建7行
for (let index = 0; index < 7; index++) {
  const row = document.createElement('tr');
  const cell = document.createElement('td');
  const input = document.createElement('input');
  input.type = 'number';
  // 绑定input事件，同时传入索引和当前输入值
  input.oninput = function() {
    updateRedScore(index, this.value);
  };
  cell.appendChild(input);
  row.appendChild(cell);
  document.querySelector('table').appendChild(row);
}

// 定义接收索引和输入值的更新函数
function updateRedScore(index, inputValue) {
  // 先把输入值转为数字，避免存字符串
  const score = Number(inputValue);
  // 过滤无效的非数字输入
  if (!isNaN(score)) {
    redScores[index] = score;
    console.log('更新后的数组：', redScores);
  }
}

Vue框架场景（如果用Vue开发） #

如果是Vue项目，利用v-for的索引参数，直接在事件绑定中传入即可：

<template>
  <table>
    <!-- 循环生成行，拿到每个行的index -->
    <tr v-for="(_, index) in rowCount" :key="index">
      <td>
        <input 
          type="number" 
          @input="updateRedScore(index, $event.target.value)"
          :value="redScores[index] || ''"
        />
      </td>
    </tr>
  </table>
</template>

<script>
export default {
  data() {
    return {
      rowCount: 7, // 动态行数，可根据用户选择修改
      redScores: []
    };
  },
  methods: {
    updateRedScore(index, inputValue) {
      const score = Number(inputValue);
      if (!isNaN(score)) {
        // 用$set确保数组更新触发响应式（如果索引超出当前数组长度时需要）
        this.$set(this.redScores, index, score);
        // 如果数组长度已经覆盖到该索引，直接赋值也可以：this.redScores[index] = score;
      }
    }
  }
};
</script>

几个注意点 #

• 输入值转换：记得把输入框的字符串值转为数字，避免数组里存的是字符串类型的数字
• 无效输入过滤：判断输入是否为有效数字，避免把NaN存入数组
• 索引对应：确保生成行时的索引和数组的索引一一对应，避免出现错位更新的情况

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