Как изменить свойство CSS динамически в Angular

Прямо сейчас у меня есть исходное изображение url, закодированное в CSS. Я хотел бы динамически выбирать фоновое изображение, используя логику в Angular. Вот то, что я в настоящее время:Как изменить свойство CSS динамически в Angular

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. Спасибо.

источник

2016-09-12 rashadb

Вы проверили https://docs.angularjs.org/api/ng/directive/ngStyle? –

@ Макаров Сергей Я посмотрел на ngStyle, но мне непонятно, является ли это классом или изменяет часть класса, и если да, то как эти точки связаны. Также я не уверен, действительно ли ngStyle или ngClass лучше или как они отличаются. Возможно, пример в ответе? :) – rashadb

Вы можете использовать ng-стиль для динамического изменения свойства класса CSS с помощью функции AngularJS.

Надеемся, что этот пример в стиле 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

Вы можете изменить фоновое изображение: URL, следуя путем.

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

источник

2016-09-12 09:07:24

@ Загрузка .. отличный пример. Я собираюсь попробовать это сейчас, но я думаю, что понимаю. Пожалуйста, дайте мне несколько минут, чтобы поиграть с ним. – rashadb

@rashadb уверен, что вы можете попробовать, вам просто нужно изменить фоновое изображение вместо цвета. –

Я не получаю, как правильно реализовать часть URL в JS, и поэтому я получаю следующую ошибку: ReferenceError: url не определен – rashadb

Вы можете использовать ng-class: documation. Если вы хотите сделать это в своем directive check directive - attr: attr.

источник

2016-09-12 09:02:06

@ Itsik Mauyhas, это выглядит полезно, но в моем случае я не хочу программно вызывать классы; Я просто хочу программно изменить один элемент в классе, background-image. Мне непонятно, как это сделать с ng-классом. – rashadb

В этом случае посмотрите на директивную документацию, добавив и удалив attr динамически. –

Я внимательно изучил разницу между ними, и ngclass динамически обслуживает фиксированные классы, где ng-стиль предназначен для динамического определения элементов стиля. Я считаю, что ng-стиль правильный для моего случая. Благодарю. – rashadb

-1

введите размер в текстовом поле вы можете увидеть окно изменяет высоту и ширину

<!DOCTYPE html> 
 
<html> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> 
 
<body> 
 

 
<p>Change the value of the input field:</p> 
 

 
<div ng-app="" > 
 

 
<input ng-model="myCol" type="textbox"> 
 

 
<div style="background-color:red; width:{{myCol}}px; height:{{myCol}}px;"> </div> 
 

 

 
</div> 
 

 

 
</body> 
 
</html>

источник

2017-08-18 14:41:34

Вы можете использовать [ngStyle] непосредственно. Это карта, так что вы можете напрямую обратиться один из его элементов таким образом: [ngStyle.CSS_PROPERTY_NAME]

Например:

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

Кроме того, для обслуживания активов, Угловое имеет функцию bypassSecurityTrustStyle утилита, которая может пригодиться при обслуживании динамических активов.

источник

2017-12-15 21:45:39 sofend

Как изменить свойство CSS динамически в Angular

ответ

Смежные вопросы