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

您希望将模型作为包含对象的数组，其中包含已启动属性“name”和“value”的对象。然后创建一个ng-repeat div非常容易，它包含2个文本输入字段：

<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/

Answer 2

UIDevice.current

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

2 个答案: