Question

我有一组通过Angular范围从服务器返回的图像，我想为每个div包装器设置一个唯一的类名。 css还需要响应，其中背景图像会根据页面布局进行更改。例如，如果页面宽度低于768像素，则背景图像使用较小的图像尺寸（ ImageMediumUrl ），否则它将使用较大的尺寸（ ImageUrl ）。

构建html的代码如下：

<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>

目前，背景图像设置为大尺寸，您可以从上面的代码中看出。

如何为每个div包装器动态创建一组响应式类名称（Angular中的媒体查询？）？

Answer 1

也许你需要创建一个检测窗口调整大小的指令，然后根据当前的大小/窗口状态重建标记。

这是一个指令的示例，它执行此操作并在绑定属性上设置“显示模式”。

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

使用Angular JS的动态和响应式类名

1 个答案: