0

The below code generates the form dynamically. - This is written in Angular js 1.4

    var $label = $('<label display="inline-block" width=25px>').text(jsonObj.ATTRIBUTES[key].ATTRIBUTE_NAME+' :  ');
    var $input = $('<input type="text">').attr({id: jsonObj.ATTRIBUTES[key].ATTRIBUTE_NAME+'Id', name: jsonObj.ATTRIBUTES[key].ATTRIBUTE_NAME, 'ng-model':'entity.'+jsonObj.ATTRIBUTES[key].ATTRIBUTE_NAME});
    $input.appendTo($label);
    $('#dynamicContent').append($label).append('<br/>');

Next this 'dynamicContent' id is there in the JSP as below

start form name="myForm" ng-submit="submitForm()"
div id='dynamicContent'
end form

Now, how do I make sure the form submits, and I will be able to access 'entity' in the controller?

PS: New to Angular and jQuery Please suggest how do I go ahead in case I just use Angular.

devk
  • 21
  • 1
  • 9
  • 1
    If you are new to both, get rid of using jQuery if you are building an angular app. What you are currently doing is already imporper – charlietfl Apr 11 '17 at 12:41
  • @charlietfl Okay, but then how do I proceed using angular? any leads? – devk Apr 12 '17 at 04:49
  • You need to include the label (and the input) inside #dynamicContent and not generate the label using jQuery. If you have some logic which determines whether the form will be visible, then use ng-show – Bharat Gupta Apr 12 '17 at 05:30
  • @BharatGupta But the label and the input are dynamic and I get those from a Webservice. I really cannot hard code the label inside #dynamicContent as you have suggested :( any other means? – devk Apr 12 '17 at 06:14
  • You know the html structure and the content is dynamic. That is normal and what angular is good at. I strongly suggest you go through some thorough angular tutorials – charlietfl Apr 12 '17 at 12:09

1 Answers1

0

You need to $compile your html fragment against the controller's scope and then append it the #dynamicContent. For this, you would need to inject $compile in your controller.

Sample code:

var htmlContent = "<prepare-your-html-using-jquery>";
$("#dynamicContent").append(
  $compile(htmlContent)(scope);
);

Reference: angularjs-jquery-how-to-get-dynamic-content-working-in-angularjs

Community
  • 1
  • 1
Bharat Gupta
  • 2,628
  • 1
  • 19
  • 27
  • this snippet works, but then how do I go about my requirement? both the label and the corresponding input field are dynamic and i'll have to form only using jQuery I suppose. – devk Apr 13 '17 at 07:15
  • @devk you can always prepare the string beforehand using jQuery and then pass that string to `$compile` – Bharat Gupta Apr 13 '17 at 09:38
  • @devk I have updated the answer so that you can visualize. – Bharat Gupta Apr 13 '17 at 10:17
  • Thanks, I am now able to form a String, the problem is when I submit the form, I am unable to get the value which is there in the ng-model attribute. Any ideas? – devk Apr 13 '17 at 12:09
  • @devk Can you create a fiddle so that I can help you debug it? – Bharat Gupta Apr 13 '17 at 13:07