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/