html - Angular JS 的动态响应式类名

标签 html css angularjs

我有一组通过 Angular 作用域从服务器返回的图像,我想为每个 div 包装器设置一个唯一的类名。在 background-image 根据页面布局变化的地方,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 中的媒体查询?)?

最佳答案

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

这是执行此操作并在绑定(bind)属性上设置“显示模式”的指令示例。

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

关于html - Angular JS 的动态响应式类名,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20639882/

相关文章:

html - 为什么我的使 Logo 居中的 CSS 代码不起作用?

Javascript 发送对象作为参数

css - 我将如何在同一行上使用 hr 设置导航样式

angularjs - 使用 angularjs UI-Router 的文件下载链接

javascript - AngularJS 中 jQuery 的 blur 事件的替代品是什么?

image - 为什么我的图像与我的横幅重叠

html - 在 iframe 中通过触摸禁用水平滚动

HTML 表单对齐输入框

html - 如何让我的 UL 在其下方进行下一次潜水而不是留下巨大的空间

javascript - UI-router 空参数导致导航到错误的路线