Obtain the content of a dynamic text input field from a nested directive

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!

Answer №1

To retrieve the value from models, simply access them directly. Check out the updated jsfiddle here

For example, to access these values in HTML, you can do the following:

<p>textbox1 value = {{model.Textbox1}}</p>
<p>textbox2 value = {{model.Textbox2}}</p>
<p>textbox3 value = {{model.samplePassword}}</p>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Why does my Visual Studio Code always display "building" when I launch an extension?

https://code.visualstudio.com/api/get-started/your-first-extension I followed a tutorial to create a hello world extension. Why does my VSCode always display 'building' when I run the extension? Executing task: npm run watch < [email p ...

Unable to retrieve JSON data in servlet

I am having trouble passing variables through JSON from JSP to a servlet using an ajax call. Despite my efforts, I am receiving null values on the servlet side. Can someone please assist me in identifying where I may have gone wrong or what I might have ov ...

Error: Attempting to access a property 'notesObjectInService' that is undefined on the object

I'm currently facing an issue where my controller is unable to load an object from a service called notesFactory. The console.log(typeof notesFactory) statement returns 'undefined', causing notesObjectInService to trigger an exception. Desp ...

Encountered error: "Node.js and socket.io: Address already in use"

Experimenting with chat using Node.js and socket.io Currently, I am running Ubuntu 12.04 as a user and have a folder "pp" on my desktop. In this folder, I have placed a server file named server.js. Below is the client code: $(document).ready(function() ...

Creating Dynamic Visibility in ASP.NET Server Controls: Displaying or hiding a textbox based on a dropdown selection

Is there a way to dynamically show/hide a textbox or an entire div section based on a user's selection from a dropdown menu? Can this be achieved using client-side HTML controls instead of server controls? Would utilizing jQuery provide the best solut ...

What is the process for activating and deactivating the scroll trigger within Material UI's useScrollTrigger module?

I'm currently working on setting up a survey page with Material UI in React. My goal is to have the survey questions appear when the user scrolls over them and disappear when they scroll out of view, similar to the behavior on this page. After some r ...

The process of examining a function that includes the invocation of an additional API function in a NodeJS environment

I'm faced with a situation where I have a nested function inside another function. The second function is responsible for making an API call. However, in order to write a unit test for this scenario, I need to avoid actually making the real API call a ...

Showing a pop-up on a click of a dynamically created table row, showcasing information specific to that row

I am facing a challenge with my dynamically generated table that is based on the JSON response from an AJAX call. What I am trying to achieve is to display additional data in a modal when a table row is clicked. This would be simple if the data was hard co ...

Having issues with handling ajax response in a Node.js application?

I am encountering an issue with my ajax post request to my node js backend. After sending the request and receiving a response, instead of updating just the resulttoken in the view, the entire HTML page seems to be loaded according to the console. I am see ...

What criteria should I use to determine if a post has been favorited by a user using Mongoose?

Creating a function for users to like posts has been my recent project. Each post is stored as an object in my MongoDB collection with a specific schema. { title: String, text: String } On the other hand, users have their own unique schema as well. ...

Substitute the attributes of one object with those of another

Alright, I'm revising this because it seems to be causing confusion. Imagine you have two items x and y. What I aim to do is swap all the characteristics of x with those of y. (Please note that this isn't your usual duplication process where a ...

Creating an expand and collapse animation in a `flex` accordion can be achieved even when the container size is fixed using

Good day, I am in need of a fixed-height HTML/CSS/JS accordion. The requirement is for the accordion container's height to be fixed (100% body height) and for any panel content overflow, the scrollbar should appear inside the panel's content div ...

Tips for adding content to a textarea with JavaScript without disrupting the editing history

I have a specific requirement where I want the user to be able to highlight text in a textarea, then press ctrl + b to automatically surround that selected text with stars. Here is what I envision happening: 1) The initial content of the textarea is: "he ...

Error in executing Javascript function

Below is a Javascript function I created for expanding and collapsing content: function showAns(inp){ var hide="#hideAns"+inp; var show="#showAns"+inp; var ansdiv ="#ans"+inp; $(hide).click(function(){ $(ansdi ...

What is the reason behind Selenium not utilizing JavaScript?

I've been a beginner in the world of Javascript for a while now, with my main goal being to use it for creating Selenium automations as part of my journey into QA automation. However, I find myself quite perplexed when it comes to the language. In al ...

Emails sent through an HTML form submission should always include a valid "from"

I am currently in the process of creating a feedback form that allows individuals to provide anonymous feedback. I have explored nodemailer and node-sendmail, but I have encountered an issue with both requiring a from address. While I am aware that this ca ...

JavaScript integration for inviting friends on Facebook

While the title may make it seem like a duplicate, this is actually a unique question. Keep reading. I am looking to develop a JavaScript script that can automatically send friend invitations to specific users. How should I go about doing this? The idea ...

Nodemon failing to trigger auto-refresh

My journey with learning node.js using nodemon has hit a roadblock. Despite following tutorials and installing everything exactly as shown, I'm facing an issue. Whenever I enter 'nodemon index.js' in the terminal, it hosts properly but any c ...

How can I load data into Vuex store before the application starts?

Within the created hook of App.vue, I am initiating a dispatch call to my store. Subsequently, in a child component, I attempt to retrieve this data using a getter. However, an issue arises as the child component is loaded before the data is stored, causin ...

Tips for implementing daterangepicker js in an Angular 2 project

I'm currently working on an Angular 2 project and I'm looking to integrate the daterangepicker.js library for a date range picker. If you're not familiar with it, you can find more information about the library here. Here's the HTML co ...