如何使用NG-重复提交从生成的输入字段中的数据,并得到所有的输入字段的值?

问题描述 投票:0回答:1

我是新来的角的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

enter image description here

我希望,我会得到所有输入字段中的值,但是当我按一下按钮我只得到了第一个输入字段的值(如在控制台中看到的)。

planet,life,solar,global

我也跟着像Ng-repeat submit form with generated fields计算器其他类似的问题,但无法弄清楚如何在我的situtation应用它。我究竟做错了什么?

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

附加信息

只是为了清楚起见,我做弦上分裂的原因是为了让标题,并在输入字段剩下的逗号分隔字符串,用户可以添加更多的字符串,并点击提交按钮。

javascript html angularjs
1个回答
0
投票

编写:在您的控制器

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>

添加样式和优化的代码风格。

© www.soinside.com 2019 - 2024. All rights reserved.