javascript - AngularJS 动态添加输入字段并保持对每个字段的引用

Question

我目前正在尝试弄清楚如何保持对各个动态添加的输入字段的引用。我有一个模态弹出窗口，如下所示:

<div ng-controller="SamplesQueryController">
            <button ng-click="toggleModal()" class="btn-splash-small">Add Sample</button>
            <modal title="Create New Sample" visible="showModal">
            <form role="form">
                Sample Name:<br> 
                <input type="text" ng-model="newSampleName.sampleName"> 
                <br> Attribute 1 Name:<br>
                <input type="text" ng-model="newAtt1Name.att1Name">
                <br> Attribute 1 Value: <br> 
                <input type="text" ng-model="newAtt1Value.att1Value"> <br>
                <button id="submitSample" ng-click="createSample();toggleModal()">Submit
                    Sample</button>
                <button id="addAttribute">Add Attribute</button>
                <button ng-click="toggleModal()">Close</button>
            </form>
            </modal>
        </div>

目前有一个用于 att1Name 和 att1Value 的输入字段，我有一个 addAttribute 按钮，它应该添加 2 个新的输入字段(用于 att2Name 和 att2Value)。我可以使用以下方法动态创建输入:

<input type="text" ng-repeat="myinput in myinputs" ng-model="myinput">
</input>

但是我怎样才能保持对输入字段中每个输入值的引用，以及我怎样才能为 myinputs 中的每个元素创建 2 个字段

我最好将这些值存储在某种结构中，例如 attributes.att1.name、attributes.att1.value、attributes.att8.name 等

Answer 1

您需要将模型作为包含对象的数组，对象的属性“名称”和“值”已启动。然后很容易创建一个包含 2 个文本输入字段的 ng-repeat div:

<div ng-repeat="input in inputs">
  <input type="text" ng-model="input.l">
  <input type="text" ng-model="input.v">
</div>

然后您可以随后通过将新启动的对象推送到 $scope.inputs 来添加字段。

function add() {
  var obj = {attr1Name: '', attr1Value: ''};
  $scope.inputs.push(obj);
}

在这里工作:https://jsfiddle.net/ccvLhmps/