html - 根据条件在Angularjs中动态应用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' }">