Dynamically generate JQM pages from Angular Model

[petebacondarwin]

I want to be able to generate new pages dynamically from model data.

Here is a minimal fiddle: http://jsfiddle.net/petebd/6DAZE/1/

Any idea how to get this working? Thanks, Pete

[tbosch]

Hi, sorry, that is not possible right now, and also not so easy. What is your exact use case? Is the number of pages constant? Then you could put every page in the html and provide an own controller for every page...

Tobias

[petebacondarwin]

Hi Tobias, Thanks for such a quick response. I am writing a questionnaire application, where each question is on a different page. The questionnaire is defined in data (i.e. a JSON object) which is loaded at runtime. I want to be able to create a new page for each of the questions in the questionnaire definition. I appreciate that I could just do the rendering on the server but this results in multiple technologies being used and I also found it difficult to extract some of the data from the questionnaire definition to put in the response that is generated by the the user answering the questions. I am thinking JQuery Mobile might actually be overkill for my needs and I am considering Angular with JQTouch. Cheers, Pete

On 27 February 2012 13:13, Tobias Bosch < reply@reply.github.com

wrote:

Hi, sorry, that is not possible right now, and also not so easy. What is your exact use case? Is the number of pages constant? Then you could put every page in the html and provide an own controller for every page...

Tobias

---

Reply to this email directly or view it on GitHub:

https://github.com/tigbro/jquery-mobile-angular-adapter/issues/21#issuecomment-4193190

[tbosch]

Hi, no, I meant to create the right number of pages (which is fixed I suppose?) directly in the html, but still use angular templating to fill in the values. By this, you can keep the data on the client. See this fiddle: http://jsfiddle.net/TnZh4/2/

The principle is as follows:

<div id="page1" data-role="page" ng:init="page=pages[0]">
    <div data-role="header">
        <h1>{{page.title}}</h1>
    </div>
   ...
</div>

<div id="page2" data-role="page" ng:init="page=pages[1]">
...

[petebacondarwin]

I see what you mean. This is a good work around but it still requires processing of the data (and html generation) on the server as well as on the client. I would rather steer clear of that for the moment. Thanks again, Pete

On 27 February 2012 13:48, Tobias Bosch < reply@reply.github.com

wrote:

Hi, no, I meant to create the right number of pages (which is fixed I suppose?) directly in the html, but still use angular templating to fill in the values. By this, you can keep the data on the client. See this fiddle: http://jsfiddle.net/TnZh4/2/

The principle is as follows:

{{page.title}}

...

... --- Reply to this email directly or view it on GitHub: https://github.com/tigbro/jquery-mobile-angular-adapter/issues/21#issuecomment-4193672

[tbosch]

Sure, it is a workaround.

But there is not need to process the html on the server: You could just put the multiple pages with the widgets like {{page.title}} in your html and repeat the pages manually. Ok, the page-ids are fixed, but everything else is not. You only have to know the maximum number of pages...

What about creating one html file for every questionnaire that you want to create? Then you know the number of pages, and also the page ids. You are also able to style every page separately, e.g. own types of input fields, ... This would not be possible using the ng:repeat approach... (or complicated by using ng:switch).

Tobias