如何在 AngularJS 中动态更改 CSS 属性

现在我有一个硬编码到 CSS 中的背景图片 URL。我想使用 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。谢谢你。

原文由 rashadb 发布，翻译遵循 CC BY-SA 4.0 许可协议

阅读 312

您可以使用 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

您可以通过以下方式更改 background-image: URL。

 $scope.style = function(value) {
   return { 'background-image': 'url(' + value+')' };
}

原文由 Mohit Tanwani 发布，翻译遵循 CC BY-SA 4.0 许可协议

如何在 AngularJS 中动态更改 CSS 属性

你尚未登录，登录后可以

CSS如何让指定的某个Tag不显示（比如：display=none），但是还是占有位置呢？

如何实现类似豆包的AI改写框跟随内容滚动效果？

body :first-child(不是body:first-child，中间有空格)伪类选择器到底选中了什么元素？

问一个鼠标滚动事件，这种是怎么实现的？

如何在CSS中实现滚动条不溢出圆角框？

form对象根据表单dom元素的name属性获取元素对象是基于什么标准的？兼容性如何？

请问，是否可以设定Table的宽度，或者不让其超过父容器呢？

Stack Overflow 翻译