AngularJs ng-style ::

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

不能像這樣使用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); 
} 

Answer 2

我用這個快速黑客：

把這個模板中：

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