How to use dynamic variable into angular

Question

I have a form where I'm taking a input and according to that creating a number of input boxes. The javascript code is given below for that.

for(i = 1; i <= c; i++) { //c = total input count
    block = block + '<div class="row">'+
            '<div class="form-group col-lg-12">'+
                '<input id="name" ng-model="new.var'+i+'name" type="text" class="form-control">'+
                '<input id="type" ng-model="new.var'+i+'type" type="text" class="form-control">'+
            '</div>'+
            '</div>';
}
document.getElementById("vars").innerHTML = block;

Above code is working fine & ng-model are getting generated dynamically fine, like new.var1name , new.var1type , new.var2name , new.var2type and so on.

But how to get those variables in my controller? If I generate those variables in my controller like below then its giving error that it cant find 'name'.

var var1 = [];
for(i = 1; i <= c; i++) { //c = total input count
    var item = {};
    console.log('var'+i+'name', 'var'+i+'unit');
    item['name'] = $scope.new.var+i+name;
    item['type'] = $scope.new.var+i+type;
    var1.push(item);
} 
console.log(JSON.stringify(var1));

so I have used like below but now no error is there but the var1 is empty.

var var1 = [];
for(i = 1; i <= c; i++) {
    var item = {};
    console.log('var'+i+'name', 'var'+i+'type');
    item['name'] = $scope.new['var'+i+'name'];
    item['type'] = $scope.new['var'+i+'type'];
    var1.push(item);
}
console.log(JSON.stringify(var1));

Please anyone help me to find what I'm doing wrong or is it possible to do???

Note that the $scope . new key is reserved for angular. This is a function that is used to create a copy of scope — Walter Chapilliquen - wZVanG
– Walter Chapilliquen - wZVanG, Commented Jun 5, 2015 at 5:20
@wZVanG but all forms are working well. Only this dynamic one not working — Jayadratha Mondal
– Jayadratha Mondal, Commented Jun 5, 2015 at 7:50

Richard Snazell · Accepted Answer · 2015-06-05 10:31:19Z

1

I would suggest that, rather than generate the html in your controller, you write this html in your view, and repeat it using angular's ng-repeat directive: https://docs.angularjs.org/api/ng/directive/ngRepeat. Something like this (not tested):

<div ng-repeat="item in c track by $index">
    <input id="name" ng-model="name[$index]" type="text" class="form-control">
    <input id="type" ng-model="type[$index]" type="text" class="form-control">
</div>

You should then be able to access the name and type arrays from $scope within your controller. If 'c' is the ng-model for your original input (which defines the number of times to repeat) then new fields should get added dynamically if this the desired functionality?

EDITED

in your controller

$scope.c = 5;
$scope.getNumber = function(num) {
  return new Array(num);   
}

in your view

<div ng-repeat="i in getNumber(c) track by $index">
    <input id="name" ng-model="name[$index]" type="text" class="form-control">
    <input id="type" ng-model="type[$index]" type="text" class="form-control">
</div>

edited Jun 5, 2015 at 10:31

answered Jun 5, 2015 at 5:34

Richard Snazell

2421 silver badge8 bronze badges

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

3 Comments

Jayadratha Mondal Over a year ago

But c is the count. Means it is an integer will contain integer value only. Then how will it repeat?? And the javascript which is adding input boxes is currently in my view.

Richard Snazell Over a year ago

Apologies, yes you are correct - you can only repeat on a collection such as an array or object. I've updated my original answer. Thanks :-)

Richard Snazell Over a year ago

Re: javascript in the view - its usually desirable to separate the two, so that the view contains html markup and the js goes in the controller

uowzd01 · Accepted Answer · 2015-06-05 06:54:07Z

0

use $scope['new.var'+i+'name']

there are two ways accessing object property in JavaScript:

if you know the name, you can do $scope.new.var1name
if the name is dynamic, which is your case, you can use the bracket syntax $scope['new.var'+i+'name']

edited Jun 5, 2015 at 6:54

answered Jun 5, 2015 at 5:28

uowzd01

1,00010 silver badges19 bronze badges

2 Comments

Pankaj Parkar Over a year ago

could you explain it how will it work..with an example

uowzd01 Over a year ago

@pankajparkar udpated, please check

Collectives™ on Stack Overflow

How to use dynamic variable into angular

2 Answers 2

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related