Questions tagged [ng-style]

The `ngStyle` directive allows you to set CSS style on an HTML element conditionally.

The ngStyle directive allows you to set CSS style on an HTML element conditionally.

This directive executes at priority level 0.

Usage

as attribute

<ANY ng-style="{expression}">
   ...
</ANY>

as class

<ANY class="ng-style: {expression};">
   ...
</ANY>

Parameters:

Needs Expression which is an object whose keys are CSS style names and values are corresponding values for those CSS keys. Since some CSS style names are not valid keys for an object, they must be quoted.

References

https://docs.angularjs.org/api/ng/directive/ngStyle

268 questions
0
votes
2 answers

ng-style working initally but not on variable update

I have a strange bug/behaviour when using ng-style with a variable, where it works on whatever value is set to it initially, but when I update the variable the view doesn't update the way it should. I can find similar questions but none in the exact…
Chrysm_Seal
  • 103
  • 8
0
votes
0 answers

apply ng-style for ng-repeat results based on another array of object data

I am trying to display the JSON data I have in the following format. I was stuck at one point where the data that is being displayed in tiles is coming from on service. And it needs to be styled based on the data coming from another service. I'm…
0
votes
3 answers

Compare two arrays and using ng-style to mark equal entries in the arrays

I have a list which shows a query of words from a db, from there i can click on one word and it gets pushed to another list which i can save than. With this i can create different wordlists. What i want to do is to give the words another color if i…
d8ta
  • 167
  • 2
  • 13
0
votes
1 answer

Kendo UI Grid and ng-style

I have a Kendo UI Grid in angular which is reading from my datasource a series of properties. One of them contains a color string. I want to use said color string to set the background-color for a square-box in the grid. I'm using the following…
mesosteros
  • 1,491
  • 2
  • 18
  • 31
0
votes
1 answer

How to bind ngStyle to ng-conent in angular2

I try to bind ngStyle to ng-content, it doesn't work, see below example: I search on internet only find below solution, ::content >>> panel-one {width:50px} =>from…
Ivan zhao
  • 1
  • 3
0
votes
2 answers

access variable in scope from ng-repeat ng-style

I got some problem on AngularJS. my controller, mainCtrl, has this variables : this.colors = {Sam:blue,Jane:red,Tom:pink}; this.arr = [{person:'Sam',story:'some story'},{name:'Tom',story:'some story2'}] And I got this code :
Chenko47
  • 293
  • 5
  • 10
0
votes
3 answers

ng-style background-image url not working for Firebase Storage reference

I'm trying to load background images in a div. I tried several options but my page is blank, nothing is displayed. Below are the different styles I tried:
M'Boulas
  • 133
  • 1
  • 2
  • 14
0
votes
1 answer

ng-style or style in ion-nav-view not getting value from controller

I am making a hbrid app using ionic and have encountered the following problem. I have tried both and but none of thoes gets value from my…
BluePrint
  • 1,926
  • 4
  • 28
  • 49
0
votes
1 answer

Angular CSS: ng-style working for one half, not other

I have an Angular application which is supposed to have a split screen with two halves, both of them with the same array values. The width and height values are set in a service and called by a controller. The style is set with ng-style on the DOM.…
Les Paul
  • 1,260
  • 5
  • 22
  • 46
0
votes
2 answers

Update background image with same URL periodically

I am working on an angular JS application. My body background must change every minute according to the image hosted by my server. In my HTML, I use ng-style to set the background image:
Vynhoû Tawa
  • 68
  • 1
  • 14
0
votes
0 answers

Angular JS - 10 $Digest cycles error for strings?

Please refer the console while you run - http://jsfiddle.net/E9bU5/239/ $scope.changecolor = function() { return colorlist[($scope.j++)%colorlist.length]; //Returns a string, not an object. }; From other SO posts, I understand that this error…
anand patil
  • 507
  • 1
  • 9
  • 26
0
votes
2 answers

How to change background image on body element dynamically using angular js(1.3.20)

I want to change background image on body element using angular js dynamically. I am trying to do this as mentioned below: Where vm.img is set from the controller, but I am not able to…
etee
  • 86
  • 6
0
votes
2 answers

Use variable in ng-style based on other DOM element

I have two tables (.table1 and .table2) that sit side by side in separate DIVs on a page and regardless of content I want the second table rows to match the height of the first table rows so that they align perfectly. The first table is built using…
jTrouble
  • 68
  • 9
0
votes
2 answers

Angularjs - Unable to apply ng-style to img tag (using ng-repeat)

I'm using Angularjs in order to display some images in the DOM, and apply some style to them (dim the background). It seems I am unable to apply ng-style to the img tag. What is the reason to that? Fiddle here. HTML:
Alex
  • 1,982
  • 4
  • 37
  • 70
0
votes
1 answer

AngularJS ng-include function or value binding per property

I would like to do the following: ng-style="{ 'width': iconWidth(), 'height': height }" iconWidth being a function and height being a string. I would like to keep the ng-style syntax and not bind the ng-style to an entire object (not…
Linvi
  • 2,077
  • 1
  • 14
  • 28