AngularJS动态添加输入字段，并保持每个参考

我目前正在试图找出如何保持对各个动态添加的输入字段的引用。我有一个模式弹出如下：AngularJS动态添加输入字段，并保持每个参考

<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个字段

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

来源

2016-02-04 GregH

见“绑定到窗体和控件状态”在这里：https://docs.angularjs.org/guide/forms – james

重读文档后还是蛮丢失 – GregH

我想你会陷入困境，因为你的域模型是错误的。想象一下带有名称和一组属性的示例。每个属性都有一个名称和一个值。然后，您可以将您的模态表单映射到一个Sample，并且在表单中，在sample.Attributes中有一个ng-repeat =“属性”。 – twsaef

你会想让你的模型成为一个Array该对象包含具有“名称”和“值”属性的对象。那么它很容易地创建一个NG重复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/

来源

2016-02-04 22:34:42 Roaringsheep

我已经实现了类似的解决方案，但是我希望为每个输入字段设置不同的非模型。例如，第一对将具有input.l1和input.v1，而第二对则为input.l2和input.v2等。这怎么能实现？ –

-1

<!DOCTYPE html> 
<html> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> 
    <body> 
     <h2>Cost Calculator</h2> 
     <p></p> 
     <p></p> 
     <p></p> 
     <div ng-app> 
     <input name="amount" ng-model="a" placeholder="Amount" /> 
     <input name="adjustment" ng-model="b" placeholder="Adjustment" />       
     <input name="advance" ng-model="c" placeholder="Total" value='{{ a-b}}' />        
     <input name="balance" placeholder="Total" readonly required value='{{ a-b-c}}' /> 
     </div> 
    </body> 
</html>

来源

2017-09-15 07:48:40 vinod

请在OP的问题中解释您的答案。 – Jerrybibo

AngularJS动态添加输入字段，并保持每个参考

回答

相关问题