web-dev-qa-db-ja.com

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を知りません。ありがとうございました。

htmlcssangularjsng-style
8
rashadb

Ngスタイルを使用して、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>

Edit-1

次の方法でbackground-image：URLを変更できます。

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

ng-classを使用できます： ドキュメント 。 directiveでそれを行いたい場合は、directive-attrを確認してください： attr 。

1
Itsik Mauyhas

[ngStyle]を直接使用できます。これはマップであるため、次のように要素の1つを直接アドレス指定できます：[ngStyle.CSS_PROPERTY_NAME]

例えば：

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

また、アセットを提供するために、Angularには、アセットを動的に提供するときに便利なbypassSecurityTrustStyleユーティリティ関数があります。

0
sofend