Jquery only works for the first time but not when it loops in ng-repeat
for the second time
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="MyTutorialApp">
<head>
<title></title>
<script src="jquery-1.6.4.js"></script>
<script src="angular.min.js"></script>
<style type="text/css">
.skillp
{
width: 25px;
}
.count
{
background-color:#4cff00;
border:2px #000000 solid;
color:#4cff00;
}
.null
{
background-color:none;
border:2px #fff solid;
}
</style>
<script type="text/javascript">
var app = angular.module('MyTutorialApp', []);
app.controller("controller", function ($scope) {
$scope.roles = [
{
id: 0,
description: [
{desc:'Java',proficiency:'5'},
{desc: 'C++', proficiency: '2'},
{desc: 'C#', proficiency: '4' }
]
}];
});
</script>
<script type="text/javascript">
$(document).ready(function () {
if ($("#skill").text() == "1")
$("#p0").addClass("count");
else if ($("#skill").text() == "2") {
$("#p0").addClass("count");
$("#p1").addClass("count");
}
else if ($("#skill").text() == "3") {
$("#p0").addClass("count");
$("#p1").addClass("count");
$("#p2").addClass("count");
}
else if ($("#skill").text() == "4") {
$("#p0").addClass("count");
$("#p1").addClass("count");
$("#p2").addClass("count");
$("#p3").addClass("count");
}
else if ($("#skill").text() == "5") {
$("#p0").addClass("count");
$("#p1").addClass("count");
$("#p2").addClass("count");
$("#p3").addClass("count");
$("#p4").addClass("count");
}
else
$("#p0").addClass("null");
$("#p1").addClass("null");
$("#p2").addClass("null");
$("#p3").addClass("null");
$("#p4").addClass("null");
});
</script>
</head>
<body ng-controller="controller">
<div ng-repeat="role in roles" style="width: 622px; height: 28px;">
<div ng-repeat="descr in role.description" style="width: 565px;
height: 22px;">
<div style="float:left;text-align:left; width:
42px;"><span>{{descr.desc}}</span></div>
<div style="float:left;text-align:right;">
<span id="skill">{{descr.proficiency}}</span>
</div>
<div style="width: 274px; height: 19px;float:left; top: 0px;
left: 0px;padding-left:10px;">
<div class="" id="p0" style="width: 20px;float:left;
color:white; top: 0px; height: 7px;border:1px black
solid;margin-top:5px;">.</div>
<div class="" id="p1" style="width: 20px;float:left;
color:white; top: 0px; height: 7px;border:1px white
solid;margin-top:5px;">.</div>
<div class="" id="p2" style="width: 20px;float:left;
color:white; top: 0px; height: 7px;border:1px white
solid;margin-top:5px;">.</div>
<div class="" id="p3" style="width: 20px;float:left;
color:white; top: 0px; height: 7px;border:1px white
solid;margin-top:5px;">.</div>
<div class="" id="p4" style="width: 20px;float:left;
color:white; top: 0px; height: 7px;border:1px white
solid;margin-top:5px;">.</div>
</div>
</div><br/>
</div>
</body>
</html>
I am having trouble with my code, what I want to accomplish is that when
the text inside the {{descr.proficiency}} is "1" for example, it will fill
one div with a green background-color. If two, fill two divs with green
background-color and so on.
When I ran my code, it seems the jquery I created is only working for the
first time it looped in the ng-repeat="descr in role.description"
My result is:
example: Java 5 -----
C++ 2
C# 4
Note: - represents the div filled withgreen color.
But what I want is to display the bars for each desc.
Expected is:
example: Java 5 -----
C++ 2 --
C# 4 ----
Can you assist me? What am I missing?
No comments:
Post a Comment