jquery - Jquery 仅在第一次时有效，但在第二次在 ng-repeat 中循环时无效

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

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

score 0 · Accepted Answer

你可以在不使用 jQuery 的情况下做到这一点。

解决方案 1：理想情况下，您应该使用ng-repeat在 descr.proficiency 上创建 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>

score 0 · Accepted Answer

您可能会考虑为此编写指令。我在 Plunkr 上创建了一个演示。

在演示中，我创建了一个名为levelwith attribute的指令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 的指令指南。我还发现Misko Hevery 关于指令的演讲非常有用。

jquery - Jquery 仅在第一次时有效，但在第二次在 ng-repeat 中循环时无效

2 回答 2

Related

Reference