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 to inject css in another page

    How to get the sticky footer to work?

    How to make hover using jquery without CSS?

    Flexbox: how to get divs to fill up 100% of the container width without wrapping?

    how do i suppose to make the 4 box be responsive?

    How to change only one function of CSS transform property w/ multiple functions?

    Basic CSS Question: How to specify height of background image of div?

    Having problems implementing a jQuery photo slideshow

    How to apply css class to uploaded image? [closed]

    How do i hide html until its processed with javascript?

    How to squircle an app icon image with just CSS

    How can I create a CSS “well” effect similar to bootstap but deeper?

    How to apply CSS styles to text only

    How to create color custom scrollbar in pure css? [closed]

    how to use tinymce content.css in rails

    How can I overlay a canvas over a paragraph so that its title is shown when hovering over its entirety?

    How to display an HTML list non-nested?

    How to insert a div in between flexbox rows and keep everything responsive?

    How do you use CSS to make a group of images that flow over the edges of the browser window?

    How to place an image in table's right corner

    CSS:How to properly remove border using CSS when border-radius is used?

    How to make rotating shape look thick?

    Does anyone know how to create this 3d flip animation via CSS?

    How to display shopping cart at the right of page

    How can I center div, inside other div with bootstrap classes?

    How to get just one parameter in 'clip' CSS property using JQuery? [duplicate]

    How can I include a CSS stylesheet in an XSL document for Internet Explorer?

    how to make a box of nxn given in a url?

    How to display a div as overlay which is hovered by a div which is inside another div?

    Show notification counter with bootstrap