web-dev-qa-db-fra.com

Comment changer une propriété CSS de manière dynamique dans AngularJS

À l'heure actuelle, j'ai une URL d'image d'arrière-plan codée en dur dans CSS. J'aimerais choisir de manière dynamique une image d'arrière-plan en utilisant la logique dans AngularJS. Voici ce que j'ai actuellement:

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

Comme vous pouvez le constater, l’arrière-plan de la CSS fait référence à un emplacement de fichier spécifique. Je veux pouvoir déterminer par programme l'emplacement de l'URL de l'image. Je ne sais vraiment pas par où commencer. Je ne connais pas JQuery. Je vous remercie.

htmlcssangularjsng-style
6
rashadb

Vous pouvez utiliser le style ng pour modifier dynamiquement une propriété de classe CSS à l'aide d'AngularJS.

J'espère que cet exemple de style vous aidera à comprendre au moins le concept.

Plus d'informations pour 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>

Edit-1

Vous pouvez changer l'image de fond: URL en procédant comme suit.

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

Vous pouvez utiliser ng-class: documation ..__ Si vous voulez le faire dans votre directive check directive - attr: attr .

1
Itsik Mauyhas

Vous pouvez utiliser [ngStyle] directement. C'est une carte, vous pouvez donc adresser directement l'un de ses éléments comme suit: [ngStyle.CSS_PROPERTY_NAME] 

Par exemple:

<div class="offer-detail-image-div"
     [ngStyle.background-image]="'url(' + backgroundSrc + ')'">Hello World!</div>

En outre, pour le service des actifs, Angular dispose de la fonction utilitaire bypassSecurityTrustStyle qui peut s'avérer utile lors de la gestion dynamique des actifs. 

0
sofend