使用自己的 ng 模型动态添加输入

Question

我需要用户能够向表单添加新的帐户代码，并且能够在将表单发送到服务器之前更改每个单独的代码。我的标记如下所示：

<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做到这一点，但这很快就会变得非常混乱和可怕。

我承认我在这里的方法可能也不是最好的方法，因为它是我第五次尝试改进它是如何完成的:)

有人对如何实现这一目标有任何想法吗？

Answer 1

如果您使用以下方法更改输入的 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数组来轻松添加新行。