AngularJs ng-style :: after

本文介绍了AngularJs ng-style :: after的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在尝试根据ng-repeat中元素的属性来编辑边框底部颜色的个体.

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

以下是html的结构示例.更改后的样式是.active-tool::after {border-bottom-color: rgb(247, 153, 248)}

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?

推荐答案

我使用此快速技巧:

将其放入模板中

<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
};

这篇关于AngularJs ng-style :: after的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！