title: Conditional ng-class
body: <p>I'm trying to use ng-class with a condition, like this:</p>
  
  <pre><code>&lt;li ng-repeat="time in matter.times_hourly | filter:searchText"  ng-class="{'time.write_off_class' : time.write_off === true, 'time.narrativeState' : time.write_off === false}" &gt;
  </code></pre>
  
  <ul>
  <li><p><code>time.write_off_class</code> has two classes inside it called "<code>write_off_bg time_closed</code>".</p></li>
  <li><p><code>time.narrativestate</code> has one class inside it called "<code>time_closed</code>"</p></li>
  <li><p><code>time.write_off</code> is a boolean.</p></li>
  </ul>
  
  <p>So, I think my problem are the quotation marks.</p>
  
  <p>I'm not sure where to put them, so I tried every possibility:</p>
  
  <ul>
  <li><p><strong>Quotes on condition</strong>: </p>
  
  <pre><code>`ng-class="{time.write_off_class : 'time.write_off === true', time.narrativeState : 'time.write_off === false'}"`
  </code></pre></li>
  </ul>
  
  <p>Result: Angular error. </p>
  
  <pre><code>`angular.min.js:107 `Error: [$parse:syntax] http://errors.angularjs.org/1.4.5/$parse/syntax?p0=.&amp;p1=is%20unexpected%2C%…20%3D%3D%20true'%2C%20time.narrativeState%20%3A%20'time.write_off%20%3D%3DNaNalse'%7D&amp;p4=.write_off_class%20%3A%20'time.write_off%20%3D%3D%20true'%2C%20time.narrativeState%20%3A%20'time.write_off%20%3D%3D%false'%7D
  </code></pre>
  
  <ul>
  <li><strong>No quotes</strong>: </li>
  </ul>
  
  <p><code>ng-class="{time.write_off_class : time.write_off === true, time.narrativeState : time.write_off === false}"</code></p>
  
  <p>Result: Angular Error.</p>
  
  <pre><code> angular.min.js:107 Error: [$parse:syntax] http://errors.angularjs.org/1.4.5/$parse/syntax?p0=.&amp;p1=is%20unexpected%2C%…f%20%3D%3D%20true%2C%20time.narrativeState%20%3A%20time.write_off%20%3D%3DNaNalse%7D&amp;p4=.write_off_class%20%3A%20time.write_off%20%3D%3D%20true%2C%20time.narrativeState%20%3A%20time.write_off%20%3D%3D%false%7D
  </code></pre>
  
  <ul>
  <li><p><strong>Quotes on everything (class and condition):</strong></p>
  
  <p><code>ng-class="{'time.write_off_class' : 'time.write_off === true', 'time.narrativeState' : 'time.write_off === false'}</code></p></li>
  </ul>
  
  <p>Result: No error, but the element gets both classes, write_off_class AND narrativeState.</p>
  
  <ul>
  <li><p><strong>Quotes on classes :</strong></p>
  
  <p><code>ng-class="{'time.write_off_class' : time.write_off === true, 'time.narrativeState' : time.write_off === false}</code></p></li>
  </ul>
  
  <p>Result: No error, and apparently the element gets the correct class (in this case, narrativeState, because at the beginning of the code all time.write_off are set to FALSE) BUT the element gets no style. If i put just ng-class="time.narrativeState" everything's ok, but if it gets it through the ng-class, then it is not working.</p>
  
  <p>What am I doing wrong? Is there any reason for the element not styling through a condition with <code>'time.narrativeState'</code> even when I'm sure it works by itself?</p>
  
  <hr>
  
  <p>I've been trying more things and I know where the main problem is now, still cannot solve it.</p>
  
  <p>My object 'time' has two fields inside that I use to give styling classes to some elements.
  "time.narrativeState" has, for example, the class "time_closed" on it.</p>
  
  <p>The thing is that, when I write <code>ng-class="time.narrativeState"</code> and I go to see the element's style, I can see "time_closed" BUT if I use instead the condition I was talking about in this question <code>ng-class="{{ time.write_off ? time.write_off_class : time.narrativeState }}" &gt;</code> what the element gets as style is not "time_closed" it is literally "time.narrativeState" and because time.narrativeState is not a class but a object's field, it dosen't work.</p>
  
  <p>Why it is getting "time.narrativeState" as the class and it's not looking INSIDE time.narrativestate to get the correct class "time_closed"??? </p>