How to create custom textbox in AngularJS and wire it with Jquery

So this week, I was task to do a project that requires dynamic input. How do you approach something like this in AngularJS was my question. I know I can use a lot of formatters from AngularJS but I decided to go the easy route, no complication.

So here’s an easy way to create input type=’text’ the Jquery way, then I call the scope (controller) from jquery let’s say $scope.MyFunction. Here’s how it’s done.

First inside your AngularJS once a button is clicked from your html (or cshtml):

on ¬†my html a simple <div id=’myTextBox’></div>

$scope.OnclickCreateTextBox = function (operation,id) {
alert(operation);
//edit or delete resolution
if (operation == 'UPDATE')
{
$('#myTextBox' + id).html('<input type="text" style="width:300px;" id="txtNew1" value="' +
name + '"><i class="glyphicon glyphicon-check" style="color:green" onclick="EditDeleteResolution('+id+')"></i>');
//newTextBoxDiv.appendTo("#TextBoxesGroup");
}
};//on jquery wire it like so:
function EditDeleteResolution(parm1) {
angular.element(document.getElementById('resTextBox' + parm1)).scope().myFunction(parm1);
}

There it is, if you have any question post them below.

Leave a Reply

Your email address will not be published. Required fields are marked *