angular循环input获取值

---

前言

在实际项目中，我们会用到angular或者原生html，js获取循环input的值,这里只做一个思路引导，仅供参考。

---

一、实现效果

这家公司是做大屏可视化数据的，使用到技术是angular+react+grafana

点击编辑修改当前table行每个input的数据。
在vue中直接进行v-for循环，input添加change事件就可以获取当前行row，以及输入的值。
在这个项目中仅使用html，js实现效果

二、实现

1.html

 return (columnHtml += `
	<div>
	  <input id="${'input' + columnIndex}" οnchange="inputChange(${columnIndex})" type="text" value="${value}"/>
	</div>
 `);

这里使用的是模板字符串实现html内容。
其实原理很简单，给每个input动态添加一个id，其中columnIndex代表的是第几列下标，再通过onchange事件将下标传递。

2.js

	window.inputChange = type => {
	   console.log(type,'type')
	   //获取当前列的表头
	   let title = _this.table.columns[type].title;
	   let value = $(`${'#input' + type}`).val();
	   console.log(value,'value')
	   //再通过循环table，匹配出表头与当前选中列相对应的，进行value修改
	    for (let i = 0; i < _this.panel.editData.length; i++) {
	        if (_this.panel.editData[i].label === title) {
	          _this.panel.editData[i].value = value;
	        }
	    }
	    
	 };

因为项目原因，所以我将这个方法挂载到window上，在change事件中，通过juqyery方法获取到动态input+type 的value值，进行修改

3.结果

可以清楚的知道第几列进行了修改，以及修改的值。