如何使用anuglar js在按钮单击上创建动态输入字段？

Question

I have a dropdown menu like this

[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

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.

Answer 1

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.