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

一尘不染

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

angularjs

现在，我有一个背景图像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。谢谢。

阅读 769

2020-07-04

共1个答案

一尘不染

您可以使用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+')' };
}

2020-07-04