I am currently working on an AngularJS phonegap application. The HTML in this application consists of a blank table that is dynamically populated using JS Ajax. The Ajax request retrieves the necessary data and fills the table using innerHTML. Each button within the table has an ng-click method associated with it:
$.ajax({
type: 'GET',
dataType: 'json',
url: 'SAMPLEURL'+tID,
contentType: 'application/json;charset=utf-8',
success: function(response){
var reqObject = JSON.parse(response);
var tableHtml = "";
for(i = 1;i<reqObject.object.length; i++)
{
var variant = reqObject.variants[i];
tableHtml += "<tr><td>";
tableHtml += "<button type='button' ng-click=\"calculateQuantity();\" class='buttonStandard' id='"+variant.Id+"' style='padding:10px 15px 20px 15px; width:100%;margin-top:-10px;'>";
tableHtml += "<div style='height:40px'><h4>"+variant.Name+"</h4></div>";
tableHtml += "</button>";
tableHtml += "</td></tr><tr><td><br /></td></tr>";
}
document.getElementById("tableSelection").innerHTML = tableHtml;
$scope.calculateQuantity = function() {
alert('test');
};
},
error: function(xhr){
alert('Failed to bring Variants');
}
});
In addition to populating the table, I have added a calculateQuantity method to the scope. The intention is for this method to display an alert with the message 'test' when a user clicks on a button. However, this functionality does not seem to be working as expected. Can anyone provide insight into what might be causing this issue?