I recently developed a custom directive using AngularJS that contains a child directive. The child directive's main task is to create various dynamic input elements like textboxes, radio buttons, and checkboxes, each with default values sourced from an array. My current challenge lies in extracting the values of these dynamically generated input elements.
for (i = 0; i < scope.arr.length; i++) {
if (scope.arr[i].type == "input" && scope.arr[i].value) {
angular.element(document.getElementById('form-block'))
.append($compile("<div>" + "</br>" + scope.arr[i].name + "</br>" + "<input type='text' ng-model='model[\"" + scope.arr[i].name + "\"]'/></div>")(scope));
} else if (scope.arr[i].type == "password" && scope.arr[i].value) {
angular.element(document.getElementById('form-block'))
.append($compile("<div>" + "</br>" + scope.arr[i].name + "</br>" + "<input type='password' ng-model='model[\"" + scope.arr[i].name + "\"]'/></div>")(scope));
} else if (scope.arr[i].type == "checkbox" && scope.arr[i].value) {
angular.element(document.getElementById('form-block'))
.append($compile("<div>" + "</br>" + scope.arr[i].name + "</br>" + "<input type='checkbox' ng-model='model[\"" + scope.arr[i].name + "\"]'/></div>")(scope));
} else if (scope.arr[i].type == "radio" && scope.arr[i].value) {
angular.element(document.getElementById('form-block'))
.append($compile("<div>" + "</br>" + scope.arr[i].name + "</br>" + "<input type='radio' value='" + scope.arr[i].value + "'" + "ng-model='model[\"" + scope.arr[i].name + "\"]'/></div>")(scope));
}
}
If you're interested in viewing my code implementation, here's the link to the fiddle:
https://jsfiddle.net/f5r7onko/
Despite trying different approaches, I haven't been successful in retrieving the values. Any insights or recommendations would greatly assist me. Thank you!