CODEWITHSUNDEEP
javascriptangularjsdynamicinput-type-file
Debugger
Debugger

Reputation: 792

How to create a Dynamic input fields on button click using anuglar js?

I have a dropdown menu like this

enter image description here

[ShortAnswer- TextBox,Checkbox,Radio button and Drop down] User can choose the input type and there can add the options by clicking the add option button like this enter image description here

by clicking the cross icon the options need to be removed.

I reffered dynamic text area

http://viralpatel.net/blogs/dynamic-add-textbox-input-button-radio-element-html-javascript/

But I need more reference about this, Please Suggest me an idea to achieve this using angular js.

Upvotes: 0

Views: 693

Answers (1)

Eeks33
Eeks33

Reputation: 2315

Build your list of inputs from an array of objects that each define an input. On button click add a new object to the array that defines the input you want to add.

html:

<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>

controller:

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

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

It would probably be best if you had a custom input directive that took a config object and it would decide which input to build. But for the sake of simplicity and clarity I just used basic raw html inputs.

Let me know if that makes sense or you need an Angular2/4 answer.

Upvotes: 1

Related Questions