JSFiddle - React, Tailwind, and code Playground
HTML
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<div class="form-horizontal" ng-app ng-controller="EmployeesController">
<div ng-form="myForm" class="form-group" ng-repeat="q in QualificationList">
<div class="col-md-10 col-xs-10">
<div class="col-md-6 col-xs-6">
<input class="form-control text-box single-line" ng-model="QualificationList[$index].Degree" ng-required="true" name="QualificationList[{{$index}}].Degree" type="text" value="" />
<span ng-show="QualificationList[$index].Institute.$invalid">The Institute field is required</span>
</div>
<div class="col-md-6 col-xs-6">
<input class="form-control text-box single-line" ng-model="QualificationList[$index].Institute" ng-required="true" name="QualificationList[{{$index}}].Institute" type="text" value="" />
<span ng-show="QualificationList[$index].Institute.$invalid">The Institute field is required</span>
</div>
</div>
<div class="col-md-2 col-xs-2">
<div class="btn-group" role="group">
<button type="button" ng-click="addToQualificationList($index)" class="btn btn-default btn-xs" aria-label="Left Align">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
</button>
<button type="button" ng-click="removeFromQualificationList($index)" class="btn btn-default btn-xs" aria-label="Left Align">
<span class="glyphicon glyphicon-remove"...
JavaScript
/* Model - with 20+ fields in my live project */
Qualification = function () {
this.Degree = undefined;
this.Institute = undefined;
}
/* Controller */
EmployeesController = function ($scope) {
/* Test Data; which I render from server side */
$scope.QualificationList = [
{
"Degree": "SSC",
"Institute": "GSEB"
},
{
"Degree": "HSC",
"Institute": "SPCE"
}
];
$scope.addToQualificationList = function (index) {
// code for the plus button
$scope.QualificationList.splice(index + 1, 0, new Qualification());
}
$scope.removeFromQualificationList = function (index) {
// code for the cross button
$scope.QualificationList.splice(index, 1);
}
}