Quiero crear varios campos de entrada en un bucle for y asignar un nombre ng-model único a cada campo para poder usar los valores más adelante. Así es como lo hice. inputmap es un mapa.
<script cam-script type="text/form-script"> for (let i=0;i<3;i++){ var name = "inputmap.item"+ i.toString(); // inputmap.item0, inputmap.item1, inputmap.item2, etc document.getElementById("inputs").innerHTML += "<input type='text' ng-model='" + name + "' required/><br>" } </script> <div id="inputs"></div> Pero cuando miro $scope.inputmap , está vacío.
Cuando codifico los campos de entrada como:
<div id="inputs"> <input type='text' ng-model='inputmap.item0' required/><br> <input type='text' ng-model='inputmap.item1' required/><br> <input type='text' ng-model='inputmap.item2' required/><br> </div>Pude obtener los valores que ingresé en los campos. Soy nuevo en HTML y se agradece cualquier ayuda/sugerencia.
Primero tiene += en document.getElementById("inputs").innerHTML += "<input type='text' ng-model='" + name + "' required/><br>" y se puede cambiar a solo =
Hay dos maneras de hacer esto. Creo que si cambia document.getElementById("inputs").innerHTML += "<input type='text' ng-model='" + name + "' required/><br>" a document.getElementById("inputs").innerHTML = `<input type='text' ng-model="${name}" required/><br>` entonces eso lo agregará correctamente. Sin embargo, nunca hice esto y es posible que no funcione donde puede hacer mi segunda forma de hacerlo:
for(let i = 0; i < 3; i++) { let input = document.createElement('input') //Creates input element let wrapper = document.getElementById('inputs') //Gets the div element let name = `inputmap.item${i.toString()}` //Gets the name input.setAttribute('ng-model', name) // Sets 'ng-model' attribute to name wrapper.appendChild(input) //Sets 'wrapper' as 'input' parent }¡Espero que esto ayude!