Как отправить данные из полей ввода, сгенерированных с помощью 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>

Вот мои js для функции в onclick submit_synonyms()

$scope.submit_synonyms = function() {
  var variable = document.getElementById('expert_advice_input').value;
  console.log(variable)
}

Вот как это выглядит в пользовательском интерфейсе

Я надеялся, что получу значение для всехполя ввода, но когда я нажимаю кнопку, я получаю только значение первого поля ввода (как видно из консоли).

planet,life,solar,global

Я также следовал другим подобным вопросам в stackoverflow, как Ng-repeatотправить форму с сгенерированными полями , но не могу понять, как применить ее в моей ситуации.Что я делаю не так?

Обратите внимание, что количество полей ввода может быть динамическим в зависимости от предоставленной мне строки.

ДОПОЛНИТЕЛЬНАЯ ИНФОРМАЦИЯ

Просто для ясности, причина, по которой я делаю разбиения на строку, состоит в том, чтобы получить заголовок и оставшиеся разделенные запятыми строки в полях ввода, к которым пользователь может добавить больше строки и нажать клавишукнопка отправки.

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>

добавьте стили и оптимизируйте стиль кода.