Wie erstellt man eine dynamische Eingabefelder auf Knopfdruck mit Anuglar js?

Question

Ich habe ein Drop-Down-Menü wie diese

[ShortAnswer- TextBox, Kästchen zum Ankreuzen, Radio-Taste und Drop-Down] Benutzer des Eingabetyp wählen und dort durch Klicken auf die Option Hinzufügen, um die Optionen hinzufügen

durch Klicken auf das Kreuz-Symbol müssen die Optionen entfernt werden.

I reffered dynamic text area

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

Aber ich darüber mehr Referenz benötigen, bitte vorschlagen mich auf eine Idee diese mit Winkel js zu erreichen.

Answer 1

Erstellen Sie Ihre Liste der Eingaben von einem Array von Objekten, die jeweils einen Eingang definieren. Fügen Sie auf Knopfdruck dem Array, das die Eingabe definiert, die Sie hinzufügen möchten, ein neues Objekt hinzu.

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); 
}; 

es wahrscheinlich am besten wäre, wenn Sie eine benutzerdefinierte Eingabe Direktive haben, die ein Config-Objekt hat und es würde entscheiden, welcher Eingang zu bauen. Aber aus Gründen der Einfachheit und Klarheit habe ich nur grundlegende Roh-HTML-Eingaben verwendet.

Lassen Sie mich wissen, wenn das Sinn macht oder Sie eine Angular2/4-Antwort benötigen.