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
.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;
}
var myApp = angular.module('myApp',[]);
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 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;
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;
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;
.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}
];
}]);
$scope.task = [
{task1:78},
{task2: 22},
{task3: 45},
{task4: 67}
];
}]);
Replies
Know the answer? Post it — somebody with the same question will find it here.