AngularJs ng-style :: after

Question

我正在尝试根据ng-repeat中元素的属性编辑border-bottom-color个体。

以下是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);
}