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

Question

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?

javascript angularjs angularjs-directive angularjs-scope

Answer 1

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

Answer 2

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

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

Answer №1

Similar questions

Setting up Access-Control-Allow-Origin in WildFly 8.1.0 configuration

Each container has its own div counter

What is causing `foo()` to function in this specific scenario?

Issue: Module 'js' not found in Node.js Express application

The body onload function fails to run upon the page loading

Issue detected in React Rollup: the specific module 'name' is not being exported from the node_modules directory

Attempt to retrieve JSON-formatted data from a repository on Git

Error encountered on NodeJS server

navigating to the start of a hyperlink

Move divs that are currently not visible on the screen to a new position using CSS animations

Getting the initial date of the upcoming month in JavaScript

AJAX - Implementing a delay in displaying AJAX results

jsonAn error occurred while attempting to access the Spotify API, which resulted

Exploring ways to utilize removeEventListener in React Native

What is the importance of accessing the session object prior to the saving and setting of a cookie by Express-Session?

Material UI allows for the creation of numbered lists with ease. This

A timer created using jQuery and JavaScript

What is the best way to store numerous objects in an array at once?

JavaScript is restricted from being accessed beyond the confines of the ui-view element

The input value remains a string even after it has been converted to a float