JSFiddle - React, Tailwind, and code Playground
HTML
<div ng-app="angularjs-starter" ng-controller="MainCtrl">
<fieldset data-ng-repeat="choice in choices">
<input type="text" ng-model="choice" name="" placeholder="Name">
<button class="remove" ng-click="removeChoice($index)">-</button>
</fieldset>
<fieldset>
<input type="text" ng-model="choiceInput" name="" placeholder="Enter Name">
<button class="addfields" ng-click="addNewChoice(choiceInput)">Add fields</button>
</fieldset>
<div id="choicesDisplay">
{{ choices }}
</div>
</div>
CSS
fieldset{
background: #FCFCFC;
padding: 16px;
border: 1px solid #D5D5D5;
}
.addfields{
margin: 10px 0;
}
#choicesDisplay {
padding: 10px;
background: rgb(227, 250, 227);
border: 1px solid rgb(171, 239, 171);
color: rgb(9, 56, 9);
}
.remove{
background: #C76868;
color: #FFF;
font-weight: bold;
font-size: 21px;
border: 0;
cursor: pointer;
display: inline-block;
padding: 4px 9px;
vertical-align: top;
line-height: 100%;
}
input[type="text"],
select{
padding:5px;
}
JavaScript
/* -------------------------------------------------------
* Filename: Adding Form Fields Dynamically
* Website: http://www.shanidkv.com
* Description: Shanidkv AngularJS blog
* Author: Muhammed Shanid [email protected]
---------------------------------------------------------*/
var app = angular.module('angularjs-starter', []);
app.controller('MainCtrl', function($scope) {
$scope.choices = [];
$scope.addNewChoice = function(input) {
if(input != ''){
$scope.choices.push(input);
$scope.choiceInput = '';
}
};
$scope.removeChoice = function(index) {
$scope.choices.splice(index,1);
};
});