title: How to add Css Class to item inside Ember's {{#each}} loop, according to index? - Ember.js
body: <p>I have a Ember app with side-menu.
  The menu items in the html are based on Ember's {{each}} loop.
  When user select a menu-item I want to add this item active class.</p>
  
  <p>How do I add css class to single item inside Ember's {{each}}
  According to condition from the controller.</p>
  
  <p>Html/Hbs:</p>
  
  <pre><code>&lt;ul&gt;
     {{#each menuItem in sideMenuItems}}
        &lt;li {{bind-attr class="isActive: active-class"}} {{ action 'selectMenuItem' _view.contentIndex }}&gt;
           {{ menuItem.text }}
        &lt;/li&gt;
     {{/each}}
  &lt;/ul&gt;
  </code></pre>
  
  <p>Controller:</p>
  
  <pre><code>Ember.ObjectController.extend({
    selectedMenuIndex: 0,
    isActive: function() {
      return (this.get('selectedMenuIndex') == ? ? ? );
    }.property('???'),
  
    actions: {
      selectMenuItem: function(itemIndex) {
        this.set('selectedMenuIndex', itemIndex);
      }
    }
  })
  </code></pre>