<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Dynamic form</title>
</head>
<body ng-app="myapp">
<div ng-controller="myctrl">
<div>
<form ng-submit="save()">
<button type="button" ng-click="add()">+</button>
<div ng-repeat="tagfield in tagfields">
<input type="text" id='{{"id"+$index}}' name='{{"id"+$index}}' ng-model="tagfield.idmodel" />
<select id='{{"selid"+$index}}' name='{{"selid"+$index}}' ng-model="tagfield.selectmodel">
<option value="text" ng-selected="true">Text</option>
<option value="password">Password</option>
</select>
<button type="button" ng-click="rem($index)">-</button>
</div>
<button type="reset">Reset</button>
<button type="submit">Submit</button>
</form>
</div>
<br/>
Live preview
<br/>
<div>
<form ng-submit="">
<div ng-repeat="tagfield in tagfields">
<dynamic-form dataobject="tagfield"></dynamic-form>
</div>
<button type="reset">Reset</button>
<button type="submit">Submit</button>
</form>
</div>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
// Code goes here
/**
*
*/
var app= angular.module("myapp",[]);
app.controller("myctrl", function($scope){
$scope.tagfields=[];
$scope.add=function(){
var dataobj = {
idmodel: '',
selectmodel: 'text'
};
$scope.tagfields.push(dataobj);
}
$scope.rem= function(indexVal){
$scope.tagfields.splice(indexVal,1);
}
$scope.save = function(){
console.log($scope.tagfields);
}
});
app.directive('dynamicForm', [ '$rootScope', function($rootScope){
return{
restrict: 'E',
scope: {
dataObject:'=dataobject'
},
link: function(scope, element, attrs){
element.append(
'Sample directive ' + scope.dataObject.selectmodel
+ '<input type='+scope.selectmodel+' ng-model='+scope.dataObject.idmodel+'>'
);
}
}
}]);
/* Styles go here */