Is it possible to dynamically create input fields in AngularJS by clicking a button?

I'm currently working on a project that involves adding an input field and a button each time a user clicks on the button.

Is there a way to retrieve the text from the input field when the new button, which is displayed alongside the input field, is clicked?

Check out my example on CodePen

var app = angular.module('ionicApp',['ionic']);
app.controller('cntr',function($scope){
     $scope.addfield=function(){
       alert("how to add input field dynamically")
     }

})

I'm not quite sure how to achieve this; in jQuery we can use the append function, like this:

$('.addcontend').append('<input \> <button>get input value</button>')

Can anyone guide me on how to do this using AngularJS?

Answer №1

To effectively manage the inputs, you can utilize an array to store them and iterate through the array to display them in the following manner:

<div class="addcontend">
  <div ng-repeat="item in inputs">
    <input ng-model="item.value"/> <button ng-click='addfield()'>get input value</button>
  </div>
</div>

Afterwards, initialize the inputs array and create a function to add new elements as shown below:

$scope.inputs = [];
$scope.addfield=function(){
  $scope.inputs.push({})
}

If you want to see a live demonstration, click on this link: CodePen Demo

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

Vue.js component communication issue causing rendering problems

When it comes to the Parent component, I have this snippet of code: <todo-item v-for="(todo, index) in todos" :key="todo.id" :todo="todo" :index="index"> </todo-item> This piece simply loops through the todos array, retrieves each todo obj ...

Creating a link using curly braces {{ }} in VUE js

I need assistance in creating links to different pages using data in curly brackets {{ }}, I am having trouble figuring out the correct way to implement them. <div id="app"> <div v-for="data in categorie"> &l ...

What is the best way to verify multiple email addresses simultaneously?

Is there a method to validate multiple email addresses entered by users in a textarea? My current approach involves using ng-pattern for validation. ...

TypeScript Error: The Object prototype must be an Object or null, it cannot be undefined

Just recently, I delved into TypeScript and attempted to convert a JavaScript code to TypeScript while incorporating more object-oriented features. However, I encountered an issue when trying to execute it with cmd using the ns-node command. private usern ...

The jQuery panel slider magically appears when you click the button, but refuses to disappear

One issue I am facing on my webpage involves a button that triggers a right panel to open using the jquery and modernizr frameworks. The button is positioned at the far right of the screen. When clicked, it slides to the left along with the panel it reveal ...

Enhancing Redux efficiency with substantial data structures

I have developed a web application using Redux and React. It is an analytics application that displays a significant amount of data. However, I am facing performance issues as the size of my data store increases. What is the best approach to prevent perfo ...

Cannot complete request: CORS issue encountered in AngularJS

I recently started using AngularJS and I'm trying to integrate the Paytm wallet into my web application. However, when I attempt to send a request to the Paytm server from my AngularJS function, I encounter the following error: Cross-Origin Request ...

Tips for designing a sleek and seamless floating button

I attempted to implement a floating button feature that remains in view while smoothly flowing using jQuery. I followed a tutorial I found online to create this for my website. The tutorial can be accessed at this link. However, after following all the ste ...

only one of the ng-bind-html elements on the page is functioning

I am currently working on an AngularJS application and encountered a problem with this block of code. Only the first ng-bind-html works for me: <div ng-bind-html='newsTitle'> <div ng-bind-html='newsDetail'></div> &l ...

Connecting Angular directive values to controller objects

I am facing an issue where the array values updated in the controller are not reflecting in the directive. The controller fetches data from a service and stores it into an array, which I then pass to the directive to create a bar graph. Below are the essen ...

Manipulating HTML content with jQuery

Review the code snippet provided below <div id="post-1234"> <h3><a href="some link">text</a></h3> <div> <div> <div> <span class"Event-Date">Event Date 1</span> </div> < ...

Discover the technique of accessing HTML/CSS toggle switch value in Golang

I am attempting to incorporate a toggle switch into my webpage. I followed this specific tutorial for guidance: w3schools.com Currently, I have set up my HTML file with a button and the toggle switch. Additionally, I configured my web server in Go to lis ...

Unable to interpret encoded json information

I'm currently developing a basic chat system using PHP and jQuery with Ajax, but I've encountered an issue when trying to display a JSON encoded string through the ajax callback function. Below is the code for the ajax request: $.ajax({ url: ...

ng-repeat inside a directive fails to update upon adding or modifying objects in the current collection

Currently, I am facing a challenge with populating a treeview that contains objects with nested arrays. If you want to see a live example of my code and the issue I'm dealing with, check out this working plunker. Let me break down how the code is st ...

Embed the variable directly within the JSON structure

My goal is to dynamically create a JavaScript object using object initializer notation, but with keys taken from a config object. Instead of the traditional method: var obj = { 'key' : 'some value' }; I envision something like this: ...

"Optimizing the Placement of jPlayer for Your Website

Struggling to properly position jPlayer on my webpage. After consulting jPlayer's documentation, I learned that it is supposed to be absolutely positioned by default. However, it seems to be flowing with the rest of the page content rather than being ...

Establishing the first display in AngularJS with the Ionic Framework

Is there a better way to set the initial screen in my Ionic framework application based on whether or not the user is logged in? In the angular.module.config section, I currently use this approach: if (window.localStorage.getItem("userKey") != null) $ ...

Struggling with the Nivo slider not loading properly?

Check out my personal website. I'm having an issue with my Nivo slider not displaying properly - it just keeps loading. Any ideas on why this is happening and how I can fix it? Below is the CSS I am using: #slider { position:relative; width: ...

What could be the root cause behind the error encountered while trying to authenticate a JWT?

I've been working on integrating a Google OAuth login feature. Once the user successfully logs in with their Google account, a JWT token is sent to this endpoint on my Express server, where it is then decoded using jsonwebtoken: app.post('/login/ ...

Is it possible to use the HTML script tag without specifying the type attribute as JavaScript? <script type="text/html"></script>?

While examining the source code of an HTML page, I stumbled upon the following snippet: <script id="searchItemTemplate" type="text/html"> <# var rows = Math.floor((Model.RecordsPerPage - 1) / 3 + 1); for (var i = 0; i < rows; ++i){ ...