How to add part of css property value through scope in ng-style in angular


Tags: javascript,css,angularjs

Problem :

I'm trying to add border through ng-style but not able to find out how can I concate value from scope variable.

Below all are not working.

<div ng-style="{'border-top' :'1px solid' + myClass}">Demo text</div>
<div ng-style="{'border-top' :'1px solid myClass'}">Demo text</div>
<div ng-style="{'border-top' :1px solid myClass}">Demo text</div>

See Fiddle



Solution :

You are missing the space(" ") in expression.

function TodoCtrl($scope) {
  $scope.myClass = "red";
}
* {
  padding: 0;
  margin: 0;
}
.red {
  color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
<div ng-app>
  <div ng-controller="TodoCtrl">
    <div ng-style="{'border-top' :'5px solid '+myClass}">Demo text</div>
    <!--====================================^^^ -->
  </div>
</div>

Fiddle Demo


    CSS Howto..

    How can I get css pseudo element :checked to work in IE7 + IE8?

    How to pass JavaFX variable into CSS style?

    How can i refer to all of my tags in CSS?

    Div doesn´t show background color after float:left

    How to create a Line Item with vertical middle aligned text?

    How to toggle overlay with no body scroll using the same button / div

    How to remove the space between list items [duplicate]

    How to fit your website for all or at lest most screen resolutions?

    CSS: Checkbox with Border. How to get Space between Border and Content?

    How do CSS radio tabs work?

    How to put all my elements in line horizontally and Should be Responsive using bootstrap?

    How to animate an unknown number of items in sequence using css animations?

    How do I fix hover property of a div?

    How to apply css transformations on HTML elements using jQuery?

    CSS - How to align 2 fields into 1 row?

    How can I set my unordered list to be in the middle not in-line (see image)?

    How to have an array of images side by side using css/html

    How to edit css files using php safely?

    Conflicting CSS Overflow Property - How to Fix?

    How can I increase input text elements' width via CSS?

    How to verify that google web font is working or not?

    Paragraph Span Class and h3 Are The Same Hex Code, But Are Showing Up As Different Colors

    How to have a bold header text?

    How to align two text boxes on same line with CSS

    How to create a circle with divided borders in CSS and Javascript?

    How to make css counter works with css selector?

    How to make a floating page div responsive

    How to show a message box on center of screen?

    How to use Bootstrap 3 grid if elements are tiled with different height and widths

    Showing refresh button when animation is complete?