Question

我正在使用ng-repeat，但如果满足某些条件，我想修改迭代。我的问题是，获得那些应该修改的特定迭代的最佳方法是什么？

现在看来，我已经使用了：nth-child选择器，但我想知道是否有一种更有棱角的方法可以使用$index或任何其他角度来实现方式是什么？

HTML代码段

<div class="line_row" ng-repeat="x in program">
    {{x.current_state}
</div>

JS片段：

for (j = 0; j < $scope.program.length; j++) {

    if ($scope.reader_location[j] == someCondition) {

        // this is the line that I'm interested in replacing.
        $(".line_row:nth-child("+(j+1)+")").css("background-color","red") 

    }
}

Answer 1

您可以在条件中使用ng-class。如果ng-class的表达式为true，则会添加一个CSS类，在本例中，我将其命名为redbackground。

HTML

<div class="line_row" ng-repeat="x in program track by $index" 
                      ng-class="{redbackground: $index === someCondition}">
  {{x.current_state}
</div>

CSS

.redbackground { background: red; }

以下是如何以多种不同方式使用ng-class的教程。

Answer 2

我认为您可以ng-class根据表达式评估，它会在该元素上放置一个类。

<强> HTML

<div class="line_row" ng-repeat="x in program" ng-class="{red: methodCall(x)}">
    {{x.current_state}}
</div>

<强>代码

$scope.methodCall = function(x){
   return x.current_state == 'something'
}

<强> CSS

.red {
   background-color: "red"
}

如何通过$ index值获取ng-repeat中的元素

2 个答案: