如何从使用ng-repeat生成的输入字段中提交数据并获取所有输入字段的值？

Question

我是Angular 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)
}

这是用户界面中的样子

我希望我能获得所有输入字段的值，但是当我单击按钮时，我只会获得第一个输入字段的值（如控制台中所示）。

planet,life,solar,global

我还遵循了stackoverflow中的其他类似问题，例如Ng-repeat submit form with generated fields，但不知道如何在我的情况中应用它。我在做什么错了？

请注意，输入字段的数量可以根据提供给我的字符串动态变化。

其他信息

为了清楚起见，我在字符串上进行拆分的原因是要在输入字段中获取标题和其余逗号分隔的字符串，用户可以向其中添加更多字符串并单击提交按钮。 / p>

Answer 1

在控制器中编写以下内容

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>

添加样式并优化代码样式。