AngularJs ng-style ::after

Question

I'm trying to edit the border-bottom-color individual depending on a property of the element in ng-repeat.

Here is an example how the html is structured. The changed style is .active-tool::after {border-bottom-color: rgb(247, 153, 248)}

html:

<div data-ng-repeat="row in rows">
        <div class='container'>
            <div 
                data-ng-style="getPrimaryColor(tvShow)" 
                class='folder tvshow' 
                data-ng-class="isActiveFolder(tvShow)" 
                id='{{tvShow.id}}' 
                data-ng-repeat="tvShow in row track by $index">

                <div data-ng-click="setSelectedTvShow(tvShow)">
                    <p class="tvshow-name">{{tvShow.name}}</p>
                </div>
            </div>
        </div>

controller.js

$scope.isActiveFolder = function(tvShow) {
        if($scope.selectedTvShow !== null && tvShow.id !== null) {
           return $scope.selectedTvShow===tvShow.id ? 'active-tool' : '';
        }
    };

    $scope.getPrimaryColor = function(tvShow) {
       if($scope.selectedTvShow !== null) {
           var result = '{' + tvShow.id + '.active-tool::after {border-bottom-color: rgb(247, 153, 248)}}';
           console.log(result);
           return result;
       };

Any ideas how this could be done?

Answer 1

I use this quick hack:

put this inside your template:

<style type="text/css">
    .active-tool::after {
        border-bottom-color: {{getShowBorderColor(tvShow)}};
    }
</style>

and then in your controller:

$scope.getShowBorderColor = function(tvShow){
    return tvShow.color; // change this for how you want to calculate the color
};