如何在AngularJS中动态更改CSS属性
现在，我有一个背景图像URL硬编码到CSS中。我想使用AngularJS中的逻辑动态选择背景图片。这是我目前拥有的：
HTML
<div class="offer-detail-image-div"><div>
CSS
.offer-detail-image-div {
position: relative;
display: block;
overflow: hidden;
max-width: 800px;
min-height: 450px;
min-width: 700px;
margin-right: auto;
margin-left: auto;
padding-right: 25px;
padding-left: 25px;
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
border-radius: 5px;
background-image: url('/assets/images/118k2d049mjbql83.jpg');
background-position: 0px 0px;
background-size: cover;
background-repeat: no-repeat;
}
如您所见，CSS中的背景图像引用了特定的文件位置。我希望能够以编程方式确定图像URL的位置。我真的不知道从哪里开始。我不知道JQuery。谢谢。
问题答案：
您可以使用ng-style使用AngularJS动态更改CSS类属性。
希望这个ng样式的示例至少可以帮助您理解概念。
ngStyle的更多信息
var myApp = angular.module('myApp', []);
myApp.controller("myAppCtrl", ["$scope", function($scope) {
$scope.colors = ['#C1D786', '#BF3978', '#15A0C6', '#9A2BC3'];
$scope.style = function(value) {
return { "background-color": value };
}
}]);
ul{
list-style-type: none;
color: #fff;
}
li{
padding: 10px;
text-align: center;
}
.original{
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp">
<div ng-controller="myAppCtrl">
<div class="container">
<div class="row">
<div class="span12">
<ul>
<li ng-repeat="color in colors">
<h4 class="original" ng-style="style(color)"> {{ color }}</h4>
</li>
</ul>
</div>
</div>
</div>
</div>
</body>
编辑1
您可以通过以下方式更改背景图片：URL。
$scope.style = function(value) {
return { 'background-image': 'url(' + value+')' };
}
-
问题内容： 我喜欢引导程序示例的外观 但是我需要在 .bs-docs-example：之后 动态更改 内容 ，如下所示： __ 这有可能吗？怎么样？ 问题答案： 实际上，我发现了一个不涉及的解决方案：之后（我对CSS太不好了，所以我没有早就考虑过…）我也对CSS有所了解。开始 ： 并像这样使用它： 我希望能有所帮助。
-
我如何在android studio中动态设置src属性(第7行),我尝试更改backgroundResource，但结果不一样 XML文件 Java代码
-
现在需要动态获取dom列表的高度，该列表是后台返回的数据，数据条数是不固定的。目前设置的动画效果是写死的高度，根据该高度做动画滚动，现在要把该高度改成动态的值。 已经尝试过的方法：roll.value.styleSheets，发现该属性获取不到@keyframes
-
注意:用户界面已经在 Dreamweaver CC 和更高版本中做了简化。因此，您可能在 Dreamweaver CC 和更高版本中找不到本文中描述的一些选项。有关详细信息，请参阅此文章。 关于动态内容 通过对提供内容的服务器行为进行编辑，可以更改页面上的动态内容。例如，您可以编辑记录集服务器行为，以便向页面提供更多的记录。 在“服务器行为”面板中列出了页面上的动态内容。例如，如果向页面中添加了某
-
我正在使用ng-view来包含AngularJS部分视图，并且我想基于包含的视图更新页面标题和h1头标签。但是，这些都超出了部分视图控制器的范围，所以我无法确定如何将它们绑定到控制器中的数据集。 如果是ASP.NET MVC，您可以使用@ViewBag来完成此操作，但我不知道AngularJS中的等同功能。我已经搜索了共享服务，事件等，但仍然不能使它工作。任何方法来修改我的例子，以便它的工作将是非
-
问题内容： 我试图在单击另一个元素时更改一个元素的CSS。我进行了很多搜索，但没有一个能完美地工作。目前，我正在使用下面的代码，但是它不起作用。谁能告诉我我错过了什么？ 问题答案： 首先，使用属性添加事件处理程序是实现所需功能的一种非常过时的方法。当您使用jQuery标记问题时，这是一个jQuery实现： 一种更有效的方法是将这些样式放入一个类中，然后将该类添加到onclick上，如下所示：