Change background Image in a Class using Angularjs

Question

I have class named "tp-cont" which is loaded from a different .css file. I could change the background image using jQuery using the below code.

In HTML:

<li ng-click="changeTemplateBackgroundImage()"></li>

In Controller:

$scope.changeTemplateBackgroundImage = function(){

        var imageUrl = 'public/uploads/Admin/template_themes/1/black.png';
        $('.tp-cont').css('background-image','url(' + imageUrl + ')');

    };

I want to know if there a work around for the same using angularjs

Thanks is advance.

Answer given below:

In Controller :

$scope.changeTemplateBackgroundImage = function(){

        $scope.bgUrl = 'public/uploads/Admin/template_themes/1/black.png';

    };

In HTML :

<div class="tp-cont" ng-style="{ 'background-image': 'url({{bgUrl}})' }">

See this: You can create a custom directive for it. http://stackoverflow.com/questions/13781685/angularjs-ng-src-equivalent-for-background-imageurl — Suren Srapyan, Aug 04 '16 at 07:26
I mean - can you add clsses to the css file itself? adding code lines to it directly? — AranS, Aug 04 '16 at 09:00

score 4 · Accepted Answer · answered May 22 '17 at 11:24

4

In Controller :

$scope.changeTemplateBackgroundImage = function(){

        $scope.bgUrl = 'public/uploads/Admin/template_themes/1/black.png';

    };

In HTML :

<div class="tp-cont" ng-style="{ 'background-image': 'url({{bgUrl}})' }">

answered May 22 '17 at 11:24

ajin

1,136
1
11
22

score 1 · Answer 2 · answered Aug 04 '16 at 07:27

1

yes, you can create a directive and use the $element

https://docs.angularjs.org/api/ng/function/angular.element

you can also do this directly in your controller. It is alos possible to use vanile js with document.getElementById

answered Aug 04 '16 at 07:27

Alexander_F

2,831
3
28
61

score 1 · Answer 3 · answered Aug 04 '16 at 07:40

$scope.changeTemplateBackgroundImage = function(){

        var imageUrl = 'public/uploads/Admin/template_themes/1/black.png';
        var element = document.getElementByClassName("tp-cont");
        element.style.backgroundImage = 'url('+imageUrl')';

    };

score 1 · Answer 4 · answered Aug 04 '16 at 07:43

1

You can use ng-style, like

<span ng-style="myStyle">Sample Text</span>, set the myStyle string in your function.

answered Aug 04 '16 at 07:43

Mavlarn

3,807
2
37
57

Change background Image in a Class using Angularjs

4 Answers4