jquery - Jquery は初めて機能しますが、ng-repeat で 2 回目にループするときは機能しません

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」の場合、1 つの div を緑色の背景色で塗りつぶすことです。2 つの場合は、2 つの div を緑の背景色などで塗りつぶします。

コードを実行すると、作成した jquery が ng-repeat="descr in role.description" で初めてループしたときにのみ機能するようです。

私の結果は:
例: Java 5 -----
C++ 2
C# 4

注: - は、緑色で塗りつぶされた div を表します。

しかし、私が欲しいのは、各デスクのバーを表示することです。

期待されるもの:
例: 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 でデモを作成しました。

levelデモでは、 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 には、 jqLiteと呼ばれる独自の軽量 jQuery 実装があります。
<span>x</span>HTML を生成できることを示すために、レベルポイントごとに生成します。

ディレクティブの詳細については、ディレクティブに関するAngular のガイドをご覧ください。また、ディレクティブに関する Misko Hevery の講演が非常に役立つこともわかりました。

jquery - Jquery は初めて機能しますが、ng-repeat で 2 回目にループするときは機能しません

2 に答える 2

Related

Reference