title: Conditional logic in AngularJS template
body: <p>I have an angular template which looks like this...</p>
  
  <pre><code>&lt;div ng-repeat="message in data.messages" ng-class="message.type"&gt;
  
      &lt;div class="info"&gt;
          &lt;div class="type"&gt;&lt;/div&gt;
          &lt;div class="from"&gt;From Avatar&lt;/div&gt;
          &lt;div class="createdBy"&gt;Created By Avatar&lt;/div&gt;
          &lt;div class="arrowTo"&gt;
              &lt;div class="arrow"&gt;&lt;/div&gt;
              &lt;div class="to"&gt;To Avatar&lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="date"&gt;
              &lt;div class="day"&gt;25&lt;/div&gt;
              &lt;div class="month"&gt;Dec&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="main"&gt;
          &lt;div class="content"&gt;
              &lt;div class="heading2"&gt;{{message.title}}&lt;/div&gt;
              &lt;div ng-bind-html="message.content"&gt;&lt;/div&gt;
          &lt;/div&gt;
  
      &lt;/div&gt;
  
      &lt;br /&gt;
      &lt;hr /&gt;
      &lt;br /&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>I have set up <a href="http://jsfiddle.net/jon64digital/pGwRu/1/" rel="noreferrer">a JSfiddle</a> to show the data being bound.</p>
  
  <p>What I need to do is make the "from", "to" and "arrowTo" divs show conditionally, depending on the content of the data.</p>
  
  <p>The log is is this...</p>
  
  <ul>
  <li>If there is a "from" object in the data then show the "from" div and bind the data but don't show the "createdBy" div .</li>
  <li>If there is no "from" object but there is a "createdBy" object then show the "createdBy" div and bind the data.</li>
  <li>If there is a "to" object in the data then show the "arrowTo" div and bind it's data.</li>
  </ul>
  
  <p>Or in plain English, if there is a from address, show it, otherwise show who created the record instead and if there is a to address then show that too.</p>
  
  <p>I have looked into using ng-switch but I think I'd have to add extra markup which would leave an empty div if there was no data. Plus I'd need to nest switch directives and I'm not sure if that would work.</p>
  
  <p>Any ideas?</p>
  
  <p><strong>UPDATE:</strong></p>
  
  <p>If I were to write my own directive (If I knew how!) then here is some pseudo code to show how I would want to use it...</p>
  
  <pre><code>&lt;div ng-if="showFrom()"&gt;
      From Template Goes Here
  &lt;/div&gt;
  &lt;div ng-if="showCreatedBy()"&gt;
      CreatedBy Template Goes Here
  &lt;/div&gt;
  &lt;div ng-if="showTo()"&gt;
      To Template Goes Here
  &lt;/div&gt;
  </code></pre>
  
  <p>Each of these would disappear if the function/expression evaluated to false.</p>