title: Conditional Table row in angularJs
body: <p>I have angular display some tables with data from a JSON file.</p>
  
  <pre><code>&lt;div class="inner"&gt;
      &lt;div ng-controller="Picks"&gt;
          &lt;element&gt;
          &lt;th&gt;&lt;b&gt;&lt;/b&gt;&lt;/th&gt;
          &lt;/element&gt;
          &lt;table id="myTable" class="tablesorter"&gt;
              &lt;thead&gt;
  
                  &lt;tr&gt;
                      &lt;th style="width: 70px"&gt;League&lt;/th&gt;
                      &lt;th style="width: 150px"&gt;Away&lt;br&gt;Home
                      &lt;/th&gt;
                      &lt;th style="width: 130px"&gt;Score&lt;/th&gt;
                      &lt;th style="width: 200px"&gt;Game Clock&lt;/th&gt;
                      &lt;th style="width: 200px"&gt;Wager&lt;/th&gt;
                      &lt;th style="width: 100px"&gt;Amount&lt;/th&gt;
                      &lt;th style="width: 100px"&gt;Odds&lt;/th&gt;
                      &lt;th style="width: 90px"&gt;Result&lt;/th&gt;
                      &lt;th style="width: 80px"&gt;Net&lt;/th&gt;
                      &lt;th style="width: 100px;"&gt;Game Date&lt;/th&gt;
                  &lt;/tr&gt;
              &lt;/thead&gt;
  
              &lt;tr&gt;&lt;td&gt;&amp;nbsp;&lt;/td&gt;&lt;/tr&gt;
              &lt;tbody ng:repeat="i in picks" style="height: 50px; left: 50px"&gt;
                  &lt;tr style="border-top: 1px solid #000; text-align:left"&gt;
                      &lt;td rowspan="2" style="width: 70px"&gt;{{i.league}}&lt;/td&gt;
                      &lt;td style="width: 150px"&gt;{{i.teamName[0]}}&lt;/td&gt;
                      &lt;td style="width: 30px"&gt;{{i.teamScore[0]}}&lt;/td&gt;
                      &lt;td rowspan="2" style="width: 100px"&gt;{{i.quarter}}&lt;/td&gt;
                      &lt;td rowspan="2" style="width: 200px"&gt;&lt;b&gt;{{i.pick}}&lt;/b&gt;&lt;/td&gt;
                      &lt;td rowspan="2" style="width: 100px"&gt;{{i.units}} Unit(s)&lt;/td&gt;
                      &lt;td rowspan="2" style="width: 100px"&gt;{{i.odds}}&lt;/td&gt;
                      &lt;td rowspan="2" style="width: 80px"&gt;{{i.result}}&lt;/td&gt;
                      &lt;td rowspan="2" style="width: 80px"&gt;{{i.net | number}}
                          Unit(s)&lt;/td&gt;
                      &lt;td rowspan="2" style="width: 100px; text-align: center"&gt;{{i.time}}&lt;/td&gt;
                  &lt;/tr&gt;
  
                  &lt;tr style="text-align:left"&gt;
                      &lt;td style="width: 150px"&gt;{{i.teamName[1]}}&lt;/td&gt;
                      &lt;td style="width: 30px"&gt;{{i.teamScore[1]}}&lt;/td&gt;
                  &lt;/tr&gt;
  
  
                  &lt;tr&gt;&lt;td&gt;&amp;nbsp;&lt;/td&gt;&lt;/tr&gt;
              &lt;/tbody&gt;
          &lt;/table&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  
  
  <pre><code>function Picks($scope, $http) {
      $http.get('http://xxxxxxxx/Service/picks').
          success(function(data) {
              $scope.picks = data;
          });
  }
  </code></pre>
  
  <p>Now what I want to do is, if there exists a pick2 property in the json, then create another tr and display some information.</p>
  
  <p>How can I create this conditonal HTML row?</p>
  
  <p>The JSON is shown below, sometimes there will be a pick2, and a pick3. When they exist, Id like the units2, odds2, result2, etc associated with that pick to be displayed on my table:</p>
  
  <p><img src="https://i.stack.imgur.com/mh4QD.png" alt=""></p>