Creating dynamic input fields on button click in AngularJS: Step-by-step guide

Question

Creating dynamic input fields on button click in AngularJS: Step-by-step guide

Currently, I am working on a project that involves a dropdown menu. Here is a sneak peek:

https://i.sstatic.net/ghwr8.jpg

In the dropdown menu, users are able to select from various input types such as TextBox, Checkbox, Radio button, and Drop down. Additionally, they can easily add options by simply clicking the "add option" button. See it in action in this image: https://i.sstatic.net/GSjjI.jpg

If a user wants to remove any options, all they need to do is click the cross icon.

While exploring ways to implement this functionality, I came across a helpful resource on a dynamic text area: dynamic text area

For further inspiration, I visited this link: http://viralpatel.net/blogs/dynamic-add-textbox-input-button-radio-element-html-javascript/

Despite these resources, I am still seeking more ideas on how to achieve this using AngularJS. Any suggestions are greatly appreciated!

javascript angularjs dynamic input-type-file

Answer 1

Answer №1

Construct a list of inputs from an array of objects that describe each input. When the button is clicked, add a new object to the array that defines the input to be added.

Here is the HTML code:

<div ng-repeat="input in inputsList">
  <span ng-click="remove($index)">x</span><input ng-if="input.type==='text'" type="text" />
  <span ng-click="remove($index)">x</span><input ng-if="input.type==='checkbox'" type="checkbox" />
  ...
</div>
<button ng-click="addNewCheckBox()">Add</button>

And here is the controller code:

$scope.addNewCheckBox = function() {
  $scope.inputsList.push({ type: 'checkbox' });
};

$scope.remove = function(index) {
   $scope.inputsList.splice(index, 1);
};

It would be beneficial to have a custom input directive that accepts a configuration object to determine which input to create. However, for simplicity and clarity, basic raw HTML inputs were utilized in this example.

If you have any questions or if you require a solution for Angular2/4, feel free to let me know.

Answer 2

Construct a list of inputs from an array of objects that describe each input. When the button is clicked, add a new object to the array that defines the input to be added.

Here is the HTML code:

<div ng-repeat="input in inputsList">
  <span ng-click="remove($index)">x</span><input ng-if="input.type==='text'" type="text" />
  <span ng-click="remove($index)">x</span><input ng-if="input.type==='checkbox'" type="checkbox" />
  ...
</div>
<button ng-click="addNewCheckBox()">Add</button>

And here is the controller code:

$scope.addNewCheckBox = function() {
  $scope.inputsList.push({ type: 'checkbox' });
};

$scope.remove = function(index) {
   $scope.inputsList.splice(index, 1);
};

It would be beneficial to have a custom input directive that accepts a configuration object to determine which input to create. However, for simplicity and clarity, basic raw HTML inputs were utilized in this example.

If you have any questions or if you require a solution for Angular2/4, feel free to let me know.

Creating dynamic input fields on button click in AngularJS: Step-by-step guide

Answer №1

Similar questions

What is the best way to pass a VueJS object to be stored in a Laravel controller?

Encountering a Module Error in AngularJS and Laravel Blade when Altering the interpolateProvider (Delimiter)

Receive information from the server and display it on the front-end

My React application came to an unexpected halt with an error message stating: "TypeError: Cannot read properties of undefined (reading 'prototype')"

Deleting an element from a reference array in Mongoose

Can someone share with me the best practices for implementing @HostListener within a method in my Angular 16 project?

Organize database entries by categories for easy navigation

What is the best way to delete a particular CSS class using jquery?

The type 'void | Observable<User>' does not include the property 'subscribe'. Error code: ts(2339)

Tips for displaying bar chart labels effectively with ChartJS

Transferring temporary information from server to controller using angular-file-upload

Can I use npm's jQuery in an old-school HTML format?

creating a JSON array within a function

JQUERY confirm dialog causing AJAX malfunction

creating a multi-page form using HTML and JavaScript

Executing both JavaScript Promise .then() and .catch concurrently

Unable to open new window on iOS devices using $window.open

Tips for creating a backup static file for angular-translate

Is it possible to alter the video dynamically according to the state in Vuex?

Examining the scroll-down feature button