Question

<!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>

我的代码遇到了问题，我想要完成的是当文本里面的内容例如{{descr.proficiency}}为“1”，它将用绿色背景颜色填充一个div。如果是两个，请用绿色背景颜色填充两个div，依此类推。

当我运行我的代码时，似乎我创建的jquery只是第一次在ng-repeat =“descr in role.description”中循环

我的结果是：
例如：Java 5 -----
C ++ 2
C＃4

注意： - 表示用绿色填充的div。

但我想要的是显示每个desc的条形。

预计是：
例如：Java 5 -----
C ++ 2 -
C＃4 ----

你能帮帮我吗？我错过了什么？

Answer 1

你可以不使用jQuery来做到这一点。

解决方案1：理想情况下，您应该使用此解决方案在descr.proficiency上使用ng-repeat创建div：

<div style="width: 274px; height: 19px; float: left; 
top: 0px; left: 0px; padding-left:10px;">
    <div class="count" ng-repeat="n in [] | range:(descr.proficiency)" 
    style="width: 20px;float:left; color:white; top: 0px; height: 7px;
    border:1px black solid;margin-top:5px;">.</div>                
</div>

JS：

app.filter('range', function() {
    return function(input, total) {
        total = parseInt(total);
        for (var i=0; i<total; i++)
            input.push(i);
        return input;
    };
});

解决方案2：有条件地应用CSS类：

<div style="width: 274px; height: 19px;float:left; top: 0px; left: 0px;
padding-left:10px;">
    <div class="{{(descr.proficiency==1 || descr.proficiency==2 || 
    descr.proficiency==3 || descr.proficiency==4 || 
    descr.proficiency==5) && 'count'}}" 
    id="p0" style="width: 20px;float:left; color:white; top: 0px; height: 7px;
    border:1px black solid;margin-top:5px;">.</div>

    <div class="{{(descr.proficiency==2 || descr.proficiency==3 || 
    descr.proficiency==4 || descr.proficiency==5) && 'count'}}" 
    id="p1" style="width: 20px;float:left; color:white; top: 0px; height: 7px;
    border:1px white solid;margin-top:5px;">.</div>

    <div class="{{(descr.proficiency==3 || descr.proficiency==4 || 
    descr.proficiency==5) && 'count'}}" 
    id="p2" style="width: 20px;float:left; color:white; top: 0px; height: 7px;
    border:1px white solid;margin-top:5px;">.</div>

    <div class="{{(descr.proficiency==4 || descr.proficiency==5) && 'count'}}" 
    id="p3" style="width: 20px;float:left; color:white; top: 0px; height: 7px;
    border:1px white solid;margin-top:5px;">.</div>

    <div class="{{(descr.proficiency==5) && 'count'}}" 
    id="p4" style="width: 20px;float:left; color:white; top: 0px; height: 7px;
    border:1px white solid;margin-top:5px;">.</div>
</div>

Answer 2

您可以考虑为此编写指令。我创建了demo on Plunkr。

在演示中，我创建了一个名为level的指令，其属性为value。用它们的级别呈现技能列表的HTML非常简单：

<div ng-repeat="skill in skills">
  {{ skill.desc  }}: <level value="{{ skill.proficiency }}"></level>
</div>

请注意，为了演示目的，我已经简化了$scope（只有技能数组，每项技能都有描述和熟练程度）。

这是一个指令实现：

app.directive('level', function() {
  return {
    restrict: 'E',
    link: function postLink(scope, element, attrs) {
      attrs.$observe('value', function(newValue) {
        // value attribute has changed, re-render
        var value = Number(newValue);
        element.children().remove();
        while (value > 0) {
          element.append('<span>x</span>')
          value--;
        }
      });
    }
  };
});

在指令实施中有几点值得指出：

指令监视级别属性，并在每次级别属性更改时重新呈现指令内容
jQuery是可选的，我不在这里使用它。 Angular有自己的轻量级jQuery实现，名为jqLite。
我为每个关卡点生成<span>x</span>，以证明我可以生成HTML。

要了解有关指令的更多信息，请查看Angular's guide on directives。我还发现Misko Hevery's talk on Directives非常有用。

Jquery只能在第一次工作，但不会在第二次循环使用ng-repeat时工作

2 个答案: