Databases
StackOverflow2013
Postsdbo
POAngularJS repeat but remove nested partial based on condition
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POAngularJS repeat but remove nested partial based on condition
    primarykey
    data
    text
    <p><strong>Question:</strong> </p> <p>How can you use ng-repeat but remove items <strong>nested inside</strong> the ng-repeat item based upon conditions but NOT the ng-repeat item itself? Hiding the item is not enough. It needs to be removed. I'm not too great at Angular.</p> <p><strong>In depth background/what I've tried:</strong></p> <p>I'm working on a project where we're switching to Angular. Previously, it was a hodgepodge of several different technologies.</p> <p>There is a form that is generated based on the response from a REST service. This service has a response like:</p> <pre><code>{ "questions": [{ "type": "multiplechoice", "question": "how are you?", "answers": [{ "text": "bad", "value": 0 }, { "text": "good", "value": 1 }] }, { "type": "text", "question": "write a word" }, { "type": "date", "question": "pick a date" }] } </code></pre> <p>Depending on question type, some HTML is written in JS and appended to the DOM. Since our workflow involves an authorable solution wherein others can modify the HTML without worrying about anything else, I thought it would be better NOT to write HTML in the JS (among other reasons). I thought it would be better to have a static HTML template which is populated with the response at runtime, but still on the page without the service running so that it can be authored.</p> <pre><code>&lt;div class="multiplechoice"&gt; &lt;label&gt;&lt;input type="checkbox" value="{{question.value}}"&gt; {{question.text}}&lt;/label&gt; &lt;/div&gt; &lt;div class="text"&gt; &lt;input type="text"&gt; &lt;/div&gt; &lt;div class="date"&gt; &lt;input type="date"&gt; &lt;/div&gt; </code></pre> <p>this would let somebody author the HTML template since it's there on the actual page. then the JS can clone the appropriate div and populate the appropriate content, either by cloning and repeating the combination or just setting a value, etc.</p> <p>My question is, what is the best way to do this in Angular? I've tried a few things and have settled on:</p> <pre><code>&lt;li ng-repeat="question in questions" class="{{question.type}}"&gt; &lt;div class="multiplechoice"&gt; &lt;label ng-repeat="q in question.answers&gt;&lt;input type="checkbox" value="{{value}}"&gt; {{text}}&lt;/label&gt; &lt;/div&gt; &lt;div class="text"&gt; &lt;input type="text"&gt; &lt;/div&gt; &lt;div class="date"&gt; &lt;input type="date"&gt; &lt;/div&gt; &lt;/li&gt; </code></pre> <p>and in the CSS, i can show/hide it based upon the class name. so like:</p> <pre><code>.date .date { display: block; } </code></pre> <p>what i would ultimately like to wind up with is not have unused templates/partials laying around inside the LIs when the ng-repeat is finished. so if it's a date question, i want:</p> <pre><code>&lt;li&gt;&lt;input type="date"&gt;&lt;/li&gt; </code></pre> <p>and nothing else so that we can cleanly iterate over the DOM.</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. This table or related slice is empty.
    1. USoooyaya
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. COi think you're talking about ng-show or ng-if
      singulars
      1. POAngularJS repeat but remove nested partial based on condition
      1. USAliceiw
    2. COsee, that's how bad I am at angular haha. I'm not sure which tools are even available yet. I'll look at that, that sounds about right.
      singulars
      1. POAngularJS repeat but remove nested partial based on condition
      1. USoooyaya
    3. COoh man - that's it. awesome. <div class='text' ng-if="question.type == 'text'">. can you leave your comment as an answer so i can mark it as accepted?
      singulars
      1. POAngularJS repeat but remove nested partial based on condition
      1. USoooyaya
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload