How to programmatically add ng-models for later use

Question

I'm listing out several inputs based on another input like this like this:

<span ng-repeat="_ in ((_ = []) && (_.length=assistant.bends || 0) && _) track by $index" class="bendsInput">
    #{{$index+1}} <br>
    <input type="text" placeholder="ft" ng-change="calculateLength()"> ft
    <input type="text" placeholder="in" ng-change="calculateLength()"> in
</span>

NOTE: the ng-repeat section might be really confusing, basically it's an ng-repeat between 0 and whatever the value of assistant.bends is the $index variable is the current index of the loop.

I need to add an ng-model to both the ft and in textboxes so that I can access them (the value of assistant.bends is dynamic and not fixed.

I'm thinking something like this: ng-model="assistant.bend{{$index}}.ft"

So that the final result will be ng-model="assistant.bend1.ft"

Then in my javascript I can loop through it and add all the feet and inches together.

var totalFeet = 0;
for(i=0; i<assistant.bends; i++) {
    totalFeet += assistant.bend+i+.ft;
}

I'm not sure on the correct syntax for something like this.

the logic you have in ng-repeat really belongs in the javascript rather than the markup — SoluableNonagon
– SoluableNonagon, Commented Dec 29, 2015 at 18:49

SoluableNonagon · Accepted Answer · 2015-12-29 19:35:17Z

1

Some advice on dynamic models: If you need a complex structure, use one, rather than repeating for a number of times based on a number

Ex:

// your JS needs a more complex structure
$scope.assistant = {
    // bends: 5 // not great, you can use this value to generate objects such as below
    bends: [ {ft: '', in: ''}, {ft: '', in: ''}, {ft: '', in: ''} ]
}
// if bends value changes, update the array

HTML

<span ng-repeat="bend in assistant.bends track by $index" class="bendsInput">
    #{{$index+1}} <br>
    <input type="text" placeholder="ft" ng-model="bend.ft" ng-change="calculateLength()"> ft
    <input type="text" placeholder="in" ng-model="bend.in" ng-change="calculateLength()"> in
</span>

<div class='sum' ng-bind="totalFeet"></div> <!-- this will update each time your function for summation runs -->

This way, your ng-model gets assigned to whatever attribute is on the structure. You can even create new keys dynamically, though I don't recommend it for the sake of consistency.

Then your loop can be about the same:

$scope.totalFeet = 0, totalInches = 0;
for(i=0; i<$scope.assistant.bends.length; i++) {
    $scope.totalFeet += assistant.bends[i].ft;
    totalInches += assistant.bends[i].in;
}
$scope.totalFeet += (totalInches / 12);

edited Dec 29, 2015 at 19:35

answered Dec 29, 2015 at 18:55

SoluableNonagon

11.8k11 gold badges59 silver badges100 bronze badges

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

3 Comments

Jordash Over a year ago

I tried this, when I type in a number say 3 in the textbox for assistant.bends it only show's one set of ft and in inputs

SoluableNonagon Over a year ago

plnkr.co/edit/9fc94AYOg1BNpcB1qYG2?p=preview, I copy/pasted my code above, and here is a link showin that it works, are you sure you're using it right?

Jordash Over a year ago

Ok now I got it working, I'm trying to figure out how to automatically update the bends array of object if the bend count number is changed.

Collectives™ on Stack Overflow

How to programmatically add ng-models for later use

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related