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

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