Динамически добавлять входы с их собственными моделями ng - PullRequest
Новая
       23

Динамически добавлять входы с их собственными моделями ng

0 голосов
/ 29 сентября 2018

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

<div id="acodes-wrapper">

<md-content id="acctCodeSection{{$index}}" ng-repeat="amt in acctCodeSegments">
<div class="acct-code-container>
  <md-content>

    <md-input-container>
      <label>FF</label>
      <input ng-model="userInputAcctCodes.ff" class="aCodesInputs" maxlength="2" auto-advance />
    </md-input-container>

    <md-input-container>
      <label>XXXX</label>
      <input ng-model="userInputAcctCodes.program" class="aCodesInputs" maxlength="4" auto-advance />
    </md-input-container>

  </md-content>
</div>
</md-content>

</div>

<md-content>
  <md-button ng-click="copyAcctCode()">Add</md-button>
</md-content>

Здесь ng-repeat привязан к массиву в контроллере, который итерируется с помощью функции: 

$scope.acctCodeSegments = [1];
$scope.codeHolder = [];
$scope.userInputAcctCodes = {
  ff: '', program: ''
};

//'Add button functionality'
$scope.copyAcctCode = function(){

  //Add new acct code segment to markup
  let addIndex = $scope.acctCodeSegments.slice(-1)[0]+1;
  $scope.acctCodeSegments.push(addIndex);

  let acData = $scope.userInputAcctCodes;

  //Push current model values to holding array
  $scope.codeHolder.push({ 
    ff: acData.ff, type: acData.program
  };

  //Wipe original model
  $scope.userInputAcctCodes = {
     ff: '', program: ''
  };
};

За что я борюсьЭто хороший способ заставить исходную разметку использовать данные модели, которые передаются в массив codeHolder, тогда как новая разметка использует исходную модель данных.В основном мне нужен способ изменить ng-модели в каждом входном теге.Я мог бы, вероятно, сделать это с Jquery, но это было бы действительно очень грязно и ужасно быстро.

Я допускаю, что мой подход здесь может быть не самым лучшим, так как он о моей 5-й попытке усовершенствовать то, как это делается:)

У кого-нибудь есть идеи, как этого добиться?

1 Ответ

0 голосов
/ 29 сентября 2018

Если вы измените ng-модель ваших входов со следующими 

<md-content id="acctCodeSection{{$index}}" ng-repeat="amt in acctCodeSegments">
<div class="acct-code-container>
  <md-content>
    <md-input-container>
      <label>FF</label>
      <input ng-model="amt.ff" class="aCodesInputs" maxlength="2" auto-advance />
    </md-input-container>
    <md-input-container>
      <label>XXXX</label>
      <input ng-model="amt.program" class="aCodesInputs" maxlength="4" auto-advance />
    </md-input-container>
  </md-content>
</div>
</md-content>

, это позволит вам изменить ng-модели в каждом входном теге.Вы можете легко добавить новую строку, вставив новый элемент в ваш массив acctCodeSegments.

...