Angularjs ng风格::之后

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，因为 html样式属性不支持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);
}