Skip to content

Instantly share code, notes, and snippets.

@mohanr
Created May 20, 2015 06:54
Show Gist options
  • Save mohanr/9c79ed88b0e88a76b935 to your computer and use it in GitHub Desktop.
Save mohanr/9c79ed88b0e88a76b935 to your computer and use it in GitHub Desktop.
Add text boxes dynamically using AngularJS
<div ng-app="app" ng-controller="MainCtrl" ng-init="textboxes = ['Text1','Text2','Text3']">
<div ng-repeat="box in textboxes">
{{box}}
<copyoftextbox ng-model="models[$index]" name={{box}} index={{$index}}></copyoftextbox>
</div>
</div>
var app = angular.module("app", []);
app.controller('MainCtrl', function($scope) {
$scope.models = ['model1','model2','model3'];
});
app.directive("copyoftextbox", function ($compile) {
return {
restrict: "E",
template: "<div ><input type='text' /></div>",
replace: true,
compile: function compile(tElement, tAttrs) {
return function (scope, iElement, iAttrs) {
var attributes = $(iElement).prop("attributes");
var $input = $(iElement).find("input");
$.each(attributes, function (index) {
if (this.name !== "class") {
$input.attr(this.name, this.value);
}
});
$compile($input)(scope);
};
}
};
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment