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我提供了static.But我想实现这样的东西

     <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' }">

基于condtion在Angular JS中动态应用CSS样式属性

1 个答案: