<!doctype html>
<html ng-app="plunker" >
<head>
<meta charset="utf-8">
<title>AngularJS Plunker</title>
<script>document.write("<base href=\"" + document.location + "\" />");</script>
<link rel="stylesheet" href="style.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.1.3/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<button type="button" ng-click="toggle_form()">Wrap via jQuery.wrap()</button>
<button type="button" ng-click="unwrap_form()">Unwrap via e.parent().replaceWith(e)</button>
<div id="form_container">
<form name="myForm">
<input ng-model="full_name" type="text" name="full_name" required ng-minlength="5" />
{{ myForm.full_name.$error }}
</form>
</div>
<button type="button" ng-click="wrap_form2()">Wrap via native JS</button>
<button type="button" ng-click="unwrap_form2()">Unwrap via native JS</button>
<div id="form2_container">
<form name="myForm2">
<input ng-model="full_name2" type="text" name="full_name2" required ng-minlength="5" />
{{ myForm2.full_name2.$error }}
</form>
</div>
</body>
</html>
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.full_name = null;
$scope.form2_show = true;
$scope.toggle_form = function() {
$('#form_container').attr('some-random-attribute', 'retained');
$('#form_container').wrap('<div></div>');
};
$scope.unwrap_form = function() {
var e = $('#form_container');
e.parent().replaceWith(e);
};
$scope.wrap_form2 = function() {
var c = document.getElementById('form2_container');
var wrapper = document.createElement('div');
var parent = c.parentNode;
parent.insertBefore(wrapper, c);
parent.removeChild(c);
wrapper.insertBefore(c, null);
};
$scope.unwrap_form2 = function() {
var c = document.getElementById('form2_container');
var wrapper = c.parentNode;
var parent = wrapper.parentNode;
// parent.replaceChild(c, wrapper);
var next = wrapper.nextSibling;
parent.removeChild(wrapper);
parent.insertBefore(c, next);
};
});
/* Put your css in here */