Expand Collapse buttons in AngularJS

Question

I intend to create multiple expand/collapse button at the bottom of each article that I display in a stream using AngularJS. This is what my page structure looks like:

<h1>Heading of the Page</h1>
<div class="item-content-wrapper">

<div class="item-content-block">
<article id="item-content" class="item-content">Some very long text goes here.
</article>
</div>
<div class="action-bar-wrapper">
    <div class="action-bar">
        <div class="action-button">
            <icon name="expand">E</icon>
        </div>
        <div class="action-button">
            <icon name="share">S</icon>
        </div>
    </div>
</div>

I have multiple item-content-blocks and I want to expand and collapse each block using AngularJS (Please DO NOT use jQuery anywhere). Since there will be multiple blocks, with same Class names and everything, a scalable code will be needed.

I am just beginning with AngularJS, so any help will be appreciated. Thanks!

Answer 1

Since there will be multiple blocks, with same Class names and everything, a scalable code will be needed.

you essentially should have each block driven off an item in your view model. Just an an expanded (boolean) option to each item. Then you can drive css classes off of it using ngClass .

More

https://docs.angularjs.org/api/ng/directive/ngClass