html - Apply CSS style attribute dynamically in Angular JS based on condtion -
hi working on project in using angularjs,mvc.i have page showing list of issues div , till using ng-class conditionally assigning border-bottom-color issues.i have made different css classes depending on status want border-bottom-color value set model property i.e 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 file
.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; }
now in above css in .pending class have used color code-#ffc7ce have provided static.but want achieve this
<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}">
you can use angular's directive ng-style
, this:
<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' }">
Comments
Post a Comment