Get/Set values of dynamical generated input fields using ng-repeat in Angular
I’m a big fan of Stack Overflow and I tend to contribute regularly (am currently in the top 0.X%). In this category (stackoverflow) of posts I will will be posting my top rated questions and answers. This, btw, is allowed as explained in the meta thread here.
My quesiton was:
I have an input field which once filled with a number populates that count of additional input fields. I can’t figure out how to get the values inserted in those generated input fields. Any help is appreciated, and oh, I did try various things and even with angular.element, or solely with jquery, but failed, so any explanation on how to do this is welcome.
Here is my jsfiddle, and the code c/p-ed here:
<div ng-controller="MyCtrl"> <input type="text" ng-model="cntInputs" placeholder="#Inputs"><br/> <input ng-repeat="i in getTimes()" type="text" placeholder="{{i}}" id="input_{{i}}"> <ul> <li ng-repeat="j in getTimes()"> Inputed value is: {{getValue(j)}} </li> </ul> </div>
js:
var myApp = angular.module('myApp', []); function MyCtrl($scope) { $scope.cntInputs = 0; $scope.getTimes=function(){ var a = new Array(); for(var i=1; i <= $scope.cntInputs; i++) a.push(i); return a; }; $scope.getValue = function(id){ //here get the value of that inserted in the element with the id of "input_" + id return angular.element("input_" + id); } }
The answer, by James Kleeh, was:
So add
ng-model="inputs[i-1]"
to your text fieldThen in your controller add
$scope.inputs= [];
Then in your
getValue
function:return $scope.inputs[id-1];
If you make your getTimes function 0 based you wouldn’t need the
-1
sUpdated your fiddle: http://jsfiddle.net/7MhLd/60/
Thank you so much for this! It helped me through an issue I was trying to figure out for a day and a half now. Using the basic structure you laid out allowed me to figure out exactly what I was doing wrong. Again, this was much appreciated. If you ever need help please let me know!
Thanks Collin, I appreciate it!