1

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

7
  • 1
    Why not just style="border: 1px solid blue" Commented Feb 3, 2016 at 16:15
  • Juan Mendes, that did not work either. Tried it Commented Feb 3, 2016 at 16:27
  • 1
    I find that hard to believe, can you post what you have tried? jsfiddle.net/mendesjuan/HB7LU/23210 Commented Feb 3, 2016 at 16:35
  • I applied style to the image, not the div Commented Feb 3, 2016 at 16:54
  • It doesn't make a difference Commented Feb 3, 2016 at 16:55

2 Answers 2

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

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

7 Comments

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.
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
@paultrone yes, but an expression should be rounded by double braces, for this reason it appears to be more a class name
@abidibo i don't think it needs double braces, check this out: plnkr.co/edit/PrwxAUbGNJ9HqOv3LFWc?p=preview
@paultrone ok, I'm updating the answer
|
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>

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.