Angular within Style Tags

Question

I wanted to have some dynamic styling to accommodate incoming user badges. It works in Rails but wanted to do something in Angular. Thoughts?

<div ng-repeat="event in events">
<style ng-repeat="product in event.products">
  .product-id-{{ product.id }} .fa-gift { display: inline-block !important; }
  .product-id-{{ product.id }} .fa-star { display: inline-block !important; }
  .product-id-{{ product.id }} .{{ product.ticket_type }} { display: inline-block !important; }
</style>
<style ng-repeat="product in event.products" ng-if="product.ticket_type == 'golden'">
  .product-id-{{ product.id }} .{{ product.ticket_type }} { display: none !important; }
  .product-id-{{ product.id }} .icon-crown.golden { display: inline-block !important; }
</style>
<style ng-repeat="product in event.products" ng-if="product.ticket_type == 'vip'">
  .product-id-{{ product.id }} .{{ product.ticket_type }} { display: none !important; }
  .product-id-{{ product.id }} .icon-crown.golden { display: none !important; }
  .product-id-{{ product.id }} .fa-diamond.vip { display: inline-block !important; }
</style>
</div>

This doesn't currently resolve values.

You can use ng-style or ng-class. You can bind variables that will be resolved. docs.angularjs.org/api/ng/directive/ngStyle docs.angularjs.org/api/ng/directive/ngClass — Roco CTZ
– Roco CTZ, Commented Aug 27, 2015 at 21:23

wesww · Accepted Answer · 2015-08-27 21:46:23Z

4

I'm not sure that using angular to set variables in inline styles is necessarily the best approach, but what you described is definitely possible:

html

<body ng-controller="MainCtrl">
  <p>color is {{color}}!</p>
  <style>
    p {
      color: {{color}};
    }
  </style>
</body>

js

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.color = 'blue';
});

http://plnkr.co/edit/cTSqgX?p=preview

I suspect there is a scoping issue with your provided example code

answered Aug 27, 2015 at 21:46

wesww

2,87320 silver badges16 bronze badges

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

3 Comments

Yasir Over a year ago

i added the ng-repeats in case its insightful. the scoping works outside the <style> tag for me <div ng-repeat="event in events"> <div ng-repeat="product in event.products"> {{ product.title }}  <style type="text/css">  </style>

wesww Over a year ago

Could be misaligned variables with your data. Here, I expanded my answer plunk to include your provided code: plnkr.co/edit/AtBUHd?p=preview

Yasir Over a year ago

awesome! thats exactly what i want to do. appreciate it!

Leo Javier · Accepted Answer · 2015-08-27 21:42:49Z

1

like this? http://jsfiddle.net/leojavier/4wwuoLxs/

<div class="field" ng-app="App">
    <table ng-controller="Controller">
        <tr ng-repeat="item in table">
            <td ng-class="item.style" ng-class="item.badge"><i ng-class="item.badge"></i> {{item.name}}</td>
        </tr>
    </table>
</div>

angular JS

var App = angular.module('App', []);
App.controller('Controller', function($scope, $timeout){
    $scope.table = [
        {name : 'Dan', deleted:false},
        {name : 'Orlando'},
        {name : 'Dany'}
   ];

    $scope.delete = function(item, index){
        item.deleted = true;
        item.style = 'deleted';

        function destroy() {
        $scope.table.splice(index, 1)
        }

        $timeout(function(){destroy();}, 3000);
    }
})

css

body{
    font-family:arial;
}
a{
    text-decoration:none;
    color:red;
}

table{
width:300px;
}

td{
    border:thin solid #CCC;
    padding:10px;

}

tr{
 position:relative   
     width:300px;
}

.deleted:after{
    content:'DELETED';
    position:absolute;
    top:0;
    left:0;
    background:red;
    width:300px;
    color:#FFF;
    text-align:center;
    line-height:40px;
}

You can see it working here: http://jsfiddle.net/leojavier/4wwuoLxs/

answered Aug 27, 2015 at 21:42

Leo Javier

1,41314 silver badges19 bronze badges

1 Comment

Leo Javier Over a year ago

In the example I'm loading fortawesome.github.io/Font-Awesome/icons to show the different icons...

Collectives™ on Stack Overflow

Angular within Style Tags

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related