AngularJS dynamically add input fields and keep reference to each

Question

I am currently trying to figure out how to keep reference to individual dynamically added input fields. I have a modal popup as follows:

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

which currently has an input field for att1Name and att1Value, I have an addAttribute button which should add 2 new input fields (for att2Name and att2Value). I can dynamically create the inputs using a method such as:

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

but how can I keep reference to each of the typed in values in the input fields and how can I create 2 fields for each element in myinputs

Preferably, I would be storing these values in some sort of structure like attributes.att1.name, attributes.att1.value, attributes.att8.name, etc

see "Binding to form and control state" here: docs.angularjs.org/guide/forms — james
– james, Commented Feb 4, 2016 at 21:54
I think you're getting stuck because your domain model is wrong. Think of a Sample, with a Name, and an array of Attributes. Each Attribute has a Name, and a Value. You can then map your modal form to a Sample, and in the form, have an ng-repeat="attribute in sample.Attributes". — twsaef
– twsaef, Commented Feb 4, 2016 at 22:27

Roaringsheep · Accepted Answer · 2016-02-04 22:34:42Z

3

You'll want to have your model as an Array that contains Objects, which has the property 'name' and 'value' initiated. Then it's pretty easy to create a ng-repeat div, that contains 2 text input fields:

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

Then you can subsequently add the fields by pushing newly initiated object to the $scope.inputs.

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

Working fiddle here: https://jsfiddle.net/ccvLhmps/

answered Feb 4, 2016 at 22:34

Roaringsheep

912 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Pablo Santamaria Over a year ago

I have implemented a similar solution, but I want to have different no-model for every input field. For example the first pair would have input.l1 and input.v1, while the second pair input.l2 and input.v2 and so on. How can that be achieved?

4b0 · Accepted Answer · 2017-09-15 08:49:02Z

-2

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

edited Sep 15, 2017 at 8:49

4b0

22.4k30 gold badges97 silver badges143 bronze badges

answered Sep 15, 2017 at 7:48

vinod

1

1 Comment

Jerrybibo Over a year ago

Please explain your answer in context of OP's question.

Collectives™ on Stack Overflow

AngularJS dynamically add input fields and keep reference to each

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related