Conditional Template Loading

[Fordio]

Hi, I am working on an application that captures responses to questions, a bit like a survey, and am looking for ideas to help me solve the following problem.

My app requests a list of questions from the a web service to ask the user. The response to a question will be of a particular type. The response could be an integer response, a text, a date etc. (There are 12 different types).

For each question type, there is a different piece of HTML markup to display the question and capture the response.

There could be any number of questions returned from the web service, with any combination of types.

How can I use AngularJS to list the questions with the right markup for each one?

I have tried:

<table ng-repeat="question in questions">

     <tr ng-include="{{question.HtmlTemplate}}"></tr>

</table>

Where question.HtmlTemplate is the url for the template for this question type - but this doesn't work.

[Pan Stav]

I don't know know about setting ngRepeat on a table tag, but.. What is best for your app.

Regrading your question, I'd suggest an ngRepeat that fills a custom directive with some attributes according to question type.

The directive then constructs the appropriate html chunk for the particular question type. If you say you have 12 types, a directive with 12 different scenarios then.

Hope that helps

[Pan Stav]

+ ngInclude expects an angular expression, meaning that you don't need the {{}}

Just like <ul><li ng-repeat="item in items" ng-show="item.relevant == true"></li></ul>

On Thursday, January 9, 2014 5:49:35 PM UTC+2, Fordio wrote:

[Fordio]

Thanks for your reply and sorry - I meant to put:

<table>

     <tr ng-repeat="question in questions" ng-include="{{question.HtmlTemplate}}"></tr>

</table>

which didn't work.

Isn't what you're suggesting very similar to this?

[Pan Stav]

It is, yea, I just don't use ngInclude unless I know I might not need some of the html it includes.

Because if I am going to use it, could save the roundtrip, especially if it's 12 roundtrips we are talking about.

It doesn't work because of the {{}}, I explained that in another reply, sorry for dup

[Fordio]

No worries, and thanks again for the reply.

I have changed it so it is like so:

<table id="header-questions" class="omniSearchable">

<tbody ng-controller="questionList">

<tr ng-repeat="question in questions" ng-include="question.HeaderText"></tr>

</tbody>

</table>

questionList controller grabs the questions and puts them into scope. I've removed the {{}} as suggested, but it still doesn't work. Viewing the element tab in Chrome dev tools I get:

<!-- ngRepeat: question in questions -->

<!-- ngInclude: question.HeaderText -->

<!-- end ngRepeat: question in questions -->

<!-- ngInclude: question.HeaderText -->

<!-- end ngRepeat: question in questions -->

...

It's like something has happened the right amount of times but it's commented out. Any ideas?

[Pan Stav]

Does the network tab show a request for the partial?

Does the console tab shows anything relevant?

If nothing, try to put the ngInclude directive in a div or some other tag *inside* the <tr>

שתהיה טיסה נעימה,

פאן - סתו.

--
You received this message because you are subscribed to a topic in the Google Groups "AngularJS" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/angular/r4UEssdrHKM/unsubscribe.
To unsubscribe from this group and all its topics, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/groups/opt_out.

[Fordio]

Hi, Thanks very much for your help.

A glance at the console pointed out my mistake. I was using the wrong variable for the partial url. 

I'm brand new to Javascript as well as AngularJS, I think that sort of situation can sometimes lead you to thinking that it's your lack of knowledge and not a stupid mistake that's causing a problem.

Thanks again - really appreciate the help ;)

[Pan Stav]

I'm new to this too (it's been a year since I decided to deep dive the JS)

And I recommend you leave that console open at all times. I don't know what I'd do without chrome DevTools.

Look for Batarang for chrome, it's a small extension that add a little "Angular Properties" Tab inside the "Elements" tab.

Clicking on any element on the DOM lets you see its immediate scope. With parent scopes available on click.

[Stephen Ford]

Thanks for the tip, Batarang installed! I have a feeling I read about it in the O'Reilly AngularJS book - trying to commit a whole book to memory is a tricky task and that knowledge slipped my mind somewhere.