Cannot apply CSS in angular applicaton

Question

For some reason I cannot apply css to my image in angular app. i have tried:

<img ng-src="Images/{{Type.TypeImg}}" ng-click="GoNext(Type.TypeId)" ng-style="zoneicon" />

and

<img ng-src="Images/{{Type.TypeImg}}" ng-click="GoNext(Type.TypeId)" ng-style="border: 1px solid blue;" />

but neither worked

I find that hard to believe, can you post what you have tried? jsfiddle.net/mendesjuan/HB7LU/23210 — Ruan Mendes
– Ruan Mendes, Commented Feb 3, 2016 at 16:35

abidibo · Accepted Answer · 2016-02-03 16:43:14Z

2

What about

<img ng-src="Images/{{Type.TypeImg}}" ng-click="GoNext(Type.TypeId)" ng-style="{'border': '1px solid blue'}" />

ng-style takes a dictionary (js object) instead of string.

So in the first example zoneicon must evaluate to an object

edited Feb 3, 2016 at 16:43

answered Feb 3, 2016 at 16:07

abidibo

4,2972 gold badges29 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

paul trone Over a year ago

ng-style can also be an expression that evaluates to an object, so if zoneicon was defined in scope as some sort of object with style properties it could also be valid.

Duncan Over a year ago

No need to say 'seems to', the docs are quite clear: ng-style takes an "expression which evals to an object whose keys are CSS style names and values are corresponding values for those CSS keys." docs.angularjs.org/api/ng/directive/ngStyle

abidibo Over a year ago

@paultrone yes, but an expression should be rounded by double braces, for this reason it appears to be more a class name

paul trone Over a year ago

@abidibo i don't think it needs double braces, check this out: plnkr.co/edit/PrwxAUbGNJ9HqOv3LFWc?p=preview

abidibo Over a year ago

@paultrone ok, I'm updating the answer

|

Ruan Mendes · Accepted Answer · 2016-02-03 16:42:54Z

0

If the style is not dynamic, you can just use the regular style/class attributes. See http://jsfiddle.net/mendesjuan/HB7LU/23212/

var myApp = angular.module('myApp', []);


function MyCtrl($scope) {
  $scope.name = 'Superhero';
}

.some {
    background-color: #aaa;
}

<div ng-controller="MyCtrl" 
     style="border: 1px solid red"
     ng-style="{color: 'blue'}"
     class="some">
  Hello, {{name}}!
</div>

answered Feb 3, 2016 at 16:42

Ruan Mendes

92.7k31 gold badges162 silver badges225 bronze badges

Collectives™ on Stack Overflow

Cannot apply CSS in angular applicaton

2 Answers 2

7 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related