Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>you've probably also seen something like this:</p> <pre><code>&lt;div ng-class="{true: 'complete'}[item.Id != 0]"&gt;&lt;/div&gt; </code></pre> <p>Very rad syntax.</p> <p><strong><em>EDIT:</em></strong> What happens here, is that the "<code>complete</code>" <code>class</code> is added to the element <code>if(item.Id != 0)</code>. Alternatively, we could write: <code>&lt;div ng-class="{false: 'cookieless'}[monsterEatsCookies('Elmo')]</code>. As its decided by the monsterEatsCookies function, Elmo does not eat cookies so since this function returns <code>false</code> the html element gains a class called <code>cookieless</code>.</p> <p>A simple example: <code>&lt;div ng-class="{false: 'DoubleNegative'}[1 == 0]</code>. <code>1 !== 0</code> which is "<code>false</code>" -- the "<code>DoubleNegative</code>" class is added to the element.</p> <pre><code>&lt;div ng-class="{ true: 'complete' } [item.Id != 0]"&gt;&lt;/div&gt; </code></pre> <p>`</p> <pre><code> | | | | | | | | | |result| |className | | | | | | | | | | function | | | condition | </code></pre> <p><em>Addendum</em></p> <p>Also, I just realized that you can use a variety of different keys to map to your condition. For example:</p> <p><code>ng-class="{ true: 'highlight', undefined: 'mute' }[ item.hasValue ]"</code></p> <p>The <code>mute</code> class will be applied if item has no "<code>hasValue</code>" property. Furthermore, you can apply a class for any given type or value:</p> <p><code>{'Jonathan Chapman': 'embolden', '[object Object]': 'hide'}[ item.toString() ]</code></p> <p>In the following collection, this would embolden a person's name while hiding items that are objects:</p> <pre><code>[ 'Jonathan Chapman', { aka: 'Johnny Applyseed' }, 'Brad Pitt', { details: 'Fights Zombies' } ] </code></pre> <p>With this, you could watch for specific values in any $scope property. I suppose this could come in very handy at times.</p> <p>Cheers</p>
    singulars
    1. This table or related slice is empty.
    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. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

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