使用角度

时间:2017-12-03 08:43:27

标签: javascript jquery css angularjs google-code-prettify

我正在尝试使用代码美化来为特定的行着色。我从后端获取数据,并且想要突出显示它们。 如果我在我的css文件中写这个:

#file2 li:nth-child(n+1):nth-child(-n+11) {
        background: #18b478;
    }

它工作正常。但是,我无法弄清楚如何使用angular来实现它,我想根据我得到的行号动态地对CSS进行更改。这就是我的尝试:

$("#file2 li:nth-child(n+1):nth-child(-n+11)").css('background', "#18b478");

这是我的HTML代码:

<div class="container" style="margin-bottom: 50px">
<div class="col-sm-6">
    <pre>
        <code class="prettyprint linenums" id="file1">***some code***</code>
    </pre>
</div>

1 个答案:

答案 0 :(得分:0)

想象一下,你有阵列中的线条颜色。 (使用行数的长度)并且您的行在另一个数组中。

$scope.lines = linesarray
$scope.colors = colorsarray
代码中的

<pre>
    <code ng-repeat="line in $scope.lines">
        Line content: {{ line }}
        Line number is: {{ $index }}
        Associated color is: {{ colors[$index] }}
    </code>
    //make use of the $index that returns current index of the ng-repeat loop
</pre>

希望这有帮助!