AngularJs ng-style ::after

Question

我正在尝试根据ng-repeat中元素的属性来编辑边框底色。

这是一个如何构造html的示例。更改后的样式为.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;
       };

你知道该怎么做吗？

Answer 1

我使用这个快速的技巧：

将此代码放入模板中：

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

然后在你的控制器中：

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

Answer 2

您不能这样使用ng-style，因为css样式属性不支持选择器。

实际上，你根本不用javascript就可以做到这一点：

标记：

<div data-ng-repeat="row in rows">
    <div class='container'>
        <div class='folder tvshow' 
             data-ng-class="{active-tool : selectedTvShow === tvShow.id}" 
             id='{{tvShow.id}}' 
             data-ng-repeat="tvShow in row track by $index">

            <div data-ng-click="selectedTvShow = tvShow.id">
                <p class="tvshow-name">{{tvShow.name}}</p>
            </div>
        </div>
    </div>
</div>

css:

.active-tool::after {
  border-bottom-color: rgb(247, 153, 248);
}