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

Question

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

<div ng-style="{'border-top' :'1px solid '+myClass}">Demo text</div> — Rayon
– Rayon, Commented Apr 15, 2016 at 7:22

Rayon · Accepted Answer · 2016-04-15 07:41:40Z

4

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

edited Apr 15, 2016 at 7:41

answered Apr 15, 2016 at 7:24

Rayon

36.6k5 gold badges54 silver badges78 bronze badges

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

Comments

Ahmad Mobaraki · Accepted Answer · 2016-04-15 07:22:05Z

0

you sould use ng-class directive to add class!

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

answered Apr 15, 2016 at 7:22

Ahmad Mobaraki

8,2485 gold badges54 silver badges75 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

Fiddle Demo

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related