我是新来的角的js,我需要创造一个输入字段将动态生成基于循环形式,我需要的所有字段的数据发送到一个API。
这是我从后端获取字符串
"Earth:planet,life,solar,global$#@data_col.signal:gateway ox,gw ox,gateway all ox,all sig,,gw signal gain,gateway"
这是下面,我处理字符串我的HTML的一部分
<div class="container-fluid synBox">
<span><b>Enter synonyms:</b></span>
<form enctype='application/json'>
<div class="form-group" name="syn" ng-repeat="n in message.expert_advice.split('$#@')">
<span class="fonts" style="color:#487baa;"><b>{{n.split(":")[0]}}</b></span>
<input class="form-control" id="expert_advice_input" type="text" ng-model={{n.split(":")[1]}} placeholder="" name={{n.split(":")[0]}} value={{n.split(":")[1]}}>
</div>
<button type="submit" class="btn btn-primary center-block" ng-click="submit_synonyms()">Submit</button>
</form>
</div>
这是我在的onclick submit_synonyms()
功能的js
$scope.submit_synonyms = function() {
var variable = document.getElementById('expert_advice_input').value;
console.log(variable)
}
这里是什么样子的UI
我希望,我会得到所有输入字段中的值,但是当我按一下按钮我只得到了第一个输入字段的值(如在控制台中看到的)。
planet,life,solar,global
我也跟着像Ng-repeat submit form with generated fields计算器其他类似的问题,但无法弄清楚如何在我的situtation应用它。我究竟做错了什么?
请注意,输入字段的数量可以根据提供给我的字符串是动态的。
附加信息
只是为了清楚起见,我做弦上分裂的原因是为了让标题,并在输入字段剩下的逗号分隔字符串,用户可以添加更多的字符串,并点击提交按钮。
编写:在您的控制器
const param = <input> //"Earth:planet,life,solar,global$#@data_col.signal:gateway ox,gw ox,gateway all ox,all sig,,gw signal gain,gateway";
$scope.param = param.split('$#@').reduce((acc,val)=> {
const spl = val.split(':');
acc[spl[0]] = spl[1];
return acc;
},{});
在您的模板或HTML以下
<ul >
<li data-ng-repeat="(key,value) in param"><label for={{key}}>{{key}}</label><input type='text' value='{{value}}'</li>
</ul>
添加样式和优化的代码风格。