{"id":1018,"date":"2014-12-23T16:08:10","date_gmt":"2014-12-23T16:08:10","guid":{"rendered":"http:\/\/www.nikola-breznjak.com\/blog\/?p=1018"},"modified":"2015-08-16T20:04:38","modified_gmt":"2015-08-16T20:04:38","slug":"getset-values-of-dynamical-generated-input-fields-using-ng-repeat-in-angular","status":"publish","type":"post","link":"https:\/\/nikola-breznjak.com\/blog\/stack-overflow\/getset-values-of-dynamical-generated-input-fields-using-ng-repeat-in-angular\/","title":{"rendered":"Get\/Set values of dynamical generated input fields using ng-repeat in Angular"},"content":{"rendered":"

\"profile<\/a>
\nI’m a big fan of Stack Overflow<\/a> and I tend to contribute regularly (am currently in the top 0.X%<\/a>).\u00a0In this category (stackoverflow<\/a>)\u00a0of posts I will will be posting my top rated questions and answers. This, btw, is allowed as explained in the meta thread here<\/a>.<\/p>\n

My quesiton<\/a> was:<\/p>\n

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.<\/p>\n

Here is my\u00a0jsfiddle<\/a>, and the code c\/p-ed here:<\/p>\n

<div ng-controller=\"MyCtrl\">\r\n    <input type=\"text\" ng-model=\"cntInputs\" placeholder=\"#Inputs\"><br\/>\r\n\r\n    <input ng-repeat=\"i in getTimes()\" type=\"text\" placeholder=\"{{i}}\" id=\"input_{{i}}\">\r\n\r\n    <ul>\r\n        <li ng-repeat=\"j in getTimes()\">\r\n            Inputed value is: {{getValue(j)}}\r\n        <\/li>\r\n    <\/ul>\r\n<\/div><\/pre>\n
js:<\/p>\n
var myApp = angular.module('myApp', []);\r\n\r\n\r\nfunction MyCtrl($scope) {\r\n    $scope.cntInputs = 0;\r\n\r\n    $scope.getTimes=function(){\r\n        var a = new Array();\r\n\r\n        for(var i=1; i <= $scope.cntInputs; i++)\r\n            a.push(i);\r\n\r\n        return a;       \r\n    };\r\n\r\n    $scope.getValue = function(id){\r\n        \/\/here get the value of that inserted in the element with the id of \"input_\" + id\r\n        return angular.element(\"input_\" + id);\r\n    }\r\n}<\/pre>\n
The answer, by James Kleeh<\/a>,\u00a0was:<\/p>\n
\n
So add\u00a0ng-model=\"inputs[i-1]\"<\/code>\u00a0to your text field<\/p>\n
Then in your controller add\u00a0$scope.inputs= [];<\/code><\/p>\n
Then in your\u00a0getValue<\/code>\u00a0function:\u00a0return $scope.inputs[id-1];<\/code><\/p>\n
If you make your getTimes function 0 based you wouldn’t need the\u00a0-1<\/code>s<\/p>\n
Updated your fiddle:\u00a0http:\/\/jsfiddle.net\/7MhLd\/60\/<\/a><\/p>\n<\/blockquote>\n","protected":false},"excerpt":{"rendered":"
I’m a big fan of Stack Overflow and I tend to contribute regularly (am currently in the top 0.X%).\u00a0In this category (stackoverflow)\u00a0of posts I will will be posting…<\/p>\n","protected":false},"author":1,"featured_media":609,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[35],"tags":[],"class_list":["post-1018","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-stack-overflow"],"_links":{"self":[{"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/posts\/1018","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/comments?post=1018"}],"version-history":[{"count":2,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/posts\/1018\/revisions"}],"predecessor-version":[{"id":1696,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/posts\/1018\/revisions\/1696"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/media\/609"}],"wp:attachment":[{"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/media?parent=1018"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/categories?post=1018"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/tags?post=1018"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}