CODEWITHSUNDEEP
javascriptangularjs
Jayadratha Mondal
Jayadratha Mondal

Reputation: 780

How to use dynamic variable into angular

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

Upvotes: 0

Views: 350

Answers (2)

Richard Snazell
Richard Snazell

Reputation: 242

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>

Upvotes: 1

uowzd01
uowzd01

Reputation: 1000

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

there are two ways accessing object property in JavaScript:

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

Upvotes: 0

Related Questions