Dynamic and responsive class names with Angular JS

Question

I have a set of images that are brought back from the server through an Angular scope and I'd like to set a unique class name for each div wrapper. The css needs to be responsive as well where the background-image changes based on the page layout. For instance, if the page width is below 768px, the background-image uses a smaller image size ( ImageMediumUrl ) otherwise it will use the big size ( ImageUrl ).

My code for constructing the html is as follows:

<div class="item" data-ng-repeat="image in carousel_images">
    <img border="0" src="/Content/img/blank.gif" ng-style="{'background-image':'url({{image.ImageUrl}})'}" />
</div>

Currently, the background-image is set to the big size as you can tell from the code above.

How can I dynamically create a set of responsive class names (media queries in Angular?) for every div wrapper?

Answer 1

Perhaps you need to create a directive that detects window resize and then rebuild the markup depending on the current size / window state.

Here's an example of a directive that does this and sets the "display mode" on the bound attribute.

http://www.dnasir.com/2013/10/09/display-mode-detection-for-responsive-websites-using-angularjs/