Post
Ask Question
arthur contino

arthur contino

  • NA
  • 3
  • 583

angular js how to change color within a div based on json

May 2 2018 1:35 PM

I have a question about a function i am working on that checks if the number given from the json is === 100 and if it is it will change a divs background color. I have the json set up i just need info on how to change the color based on an a checking equality function in angularjs. My code is as follows and basically i need to change the blue to green when the json number returns "100" representing 100 percent completion

 

<html class="no-js" ng-app="myApp">
<head></head>
<body ng-controller="TaskCtrl">
<div class="panel-body">
<ul class="milestone-bar">
<li>
<a href="" class="newanchor"> {{task[0].task1}}%</a> <div class="progress project-progress">
<div class="progress-bar" role="progressbar" aria-valuenow="34%" aria-valuemin="0" aria-valuemax="100" ng-attr-style="width:{{task[0].task1}}%;">
</div>
</div>

</li>
<li>
<a href="" class="newanchor"> {{task[1].task2}}%</a>
<div class="progress project-progress">
<div class="progress-bar" role="progressbar" aria-valuenow="100.0" aria-valuemin="0" aria-valuemax="100" ng-attr-style="width:{{task[1].task2}}%;">
<li>
<a href="" class="newanchor"> {{task[2].task3}}%</a> <div class="progress project-progress">
<div class="progress-bar" role="progressbar" aria-valuenow="50.0" aria-valuemin="0" aria-valuemax="100"ng-attr-style="width:{{task[2].task3}}%;">
</div>
</div>

</li>

<li>
<a href="" class="newanchor"> {{task[3].task4}}%</a> <div class="progress project-progress">
<div class="progress-bar" role="progressbar" aria-valuenow="50.0" aria-valuemin="0" aria-valuemax="100"ng-attr-style="width:{{task[3].task4}}%;">
</div>
</div>

</li>
</ul>
</div>
</div>
</div>
</body>
</html> 
 
 
.progress-bar{
color:white;
}
.panel-body{
width:500px;
}
* {
box-sizing: border-box;
}
ul.milestone-bar {
padding: 0;
margin: 0 0 15px 0;
display: flex;
}
ul.milestone-bar li {
width: 100%;
list-style: none;
display: flex;
}
ul.milestone-bar li a {
width: 40px;
height: 40px;

border-radius: 50%;
text-align: center;
line-height: 35px;
font-size:10px;
background: #E4E4E7;
}
ul.milestone-bar li a:hover {
background: none;
border: 2px solid #d3d3d3;
line-height: 35px;
}
ul.milestone-bar li .project-progress {
background: #E4E4E7;
display: inline-block;
margin: 0;
flex: 1;
align-self: center;
}
ul.milestone-bar li .project-progress .progress-bar {
background: #1C84C6;
vertical-align: middle;
text-align: center;
height: .55em;
left: -.4em;
right: -.4em;

}
.progress-bar{
height:16px;
margin: 0 -5px 0 0;
}
.newanchor{
padding-left:4px;
padding-top:2px;
text-decoration:none;

}

var myApp = angular.module('myApp',[]);
myApp.controller('TaskCtrl', ['$scope', function($scope) {
$scope.task = [
{task1:78},
{task2: 22},
{task3: 45},
{task4: 67}
];
}]);