根據條件在Angular JS中動態應用CSS樣式屬性

Question

嗨，我正在一個正在使用angularjs，mvc的項目中工作。我有一個頁面在其中顯示問題列表為div，直到現在我一直在有條件地使用ng-class為我的問題分配border-bottom-color 。我根據狀態設置了不同的css類，但是現在我希望將我的border-bottom-color值設置為我的模型屬性，即selectedProject.ProjectIssues.ColorInHexa

view.cshtml

  <div data-ng-repeat="issue in  Issues | filter:searchIssue" 
       data-ng-click="showIssueDetails(issue);"
       data-ng-cloak=""
       class="list-group list-group-item list-group-item-i ng-cloak no-radius no-border no-bg m-t-n-xxs m-b" 
       data-ng-class="{active: issue.Id == selectedIssue.Id,
                       pending: issue.StatusName == 'Pending',inprogress: issue.StatusName == 'In Progress',
                       limitation: issue.StatusName == 'Limitation',
                       needsresearch: issue.StatusName == 'Needs Research',
                       intesting: issue.StatusName == 'In Testing',
                       issuenotclear: issue.StatusName == 'Issue Not Clear',
                       unassigned: issue.StatusName == 'Unassigned'}">

CSS文件

 .pending 
    {
    border-bottom: 4px solid #FFC7CE !important;
    padding-bottom: 5px;
    }

    .inprogress {
    border-bottom: 4px solid #E2ACFD !important;
    padding-bottom: 5px;
    }

    .limitation {
    border-bottom: 4px solid #AAAAAA !important;
    padding-bottom: 5px;
    }

.needsresearch {
    border-bottom: 4px solid #808080 !important;
    padding-bottom: 5px;
}

.intesting {
    border-bottom: 4px solid #FFEB9C !important;
    padding-bottom: 5px;
}
.issuenotclear
{
    background-color: #FFFFFF;
}
.unassigned
{
    background-color: #D0D0D0;
}

.blacktxt {
    color: black;
    font-family: Calibri;
    font-size: 14px;
    font-weight: normal;
}

.issuecount {
    border: 1px solid #A0A0A0;
    padding: 0px 6px;
    font-size: 10px;
}

.pendingissue {
    background-color: #FFC7CE;
    color: #BB002E;
}

.inprogressissue {
    background-color: #E2ACFD;
    color: #494DAB;
}

.limitationissue {
    background-color: #AAAAAA;
    color: #704F5F;
}

.needsresearchissue {
    background-color: #808080;
    color: #612032;
}

.intestingissue {
    background-color: #FFEB9C;
    color: #9C6524;
}

現在在上面的CSS中（如.pending類中），我使用了已提供靜態的顏色代碼-＃FFC7CE，但我想實現這樣的功能

     <div data-ng-repeat="issue in  Issues | filter:searchIssue" 
          data-ng-click="showIssueDetails(issue);"
          data-ng-cloak=""
          class="list-group list-group-item list-group-item-i ng-cloak no-radius no-border no-bg m-t-n-xxs m-b" 
          data-ng-class="{active: issue.Id == selectedIssue.Id,
                         {border-bottom-color:selectedProject.ProjectIssues.ColorInHexa;}: issue.StatusName == selectedProject.ProjectIssues.Status}">

Answer 1

您可以使用Angular的指令ng-style並執行以下操作：

<div data-ng-repeat="issue in  Issues | filter:searchIssue" 
      data-ng-click="showIssueDetails(issue);"
      data-ng-cloak=""
      class="list-group list-group-item list-group-item-i ng-cloak no-radius no-border no-bg m-t-n-xxs m-b" 
      data-ng-class="{active: issue.Id == selectedIssue.Id }"
      data-ng-style="{ 'border-bottom-color': issue.StatusName == selectedProject.ProjectIssues.Status ? selectedProject.ProjectIssues.ColorInHexa : 'none' }">