如何通過$ index值獲取ng-repeat中的元素

我正在使用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") 

    } 
}

來源

2015-12-09 digglemister

我想你可以在這裏基於表達式評估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" 
}

來源

2015-12-09 20:55:55

嘿，你能幫我在這裏，.. http://stackoverflow.com/q/33997547/4044949 –

您可以使用ng-class與條件。如果ng-class的表達式爲真，它將添加一個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的教程。

來源

2015-12-09 20:55:08

這是假設someCondition不改變，是否正確？在我的程序中，someCondition會動態變化。在這裏可以使用ng-class嗎？ – digglemister

是的。請檢查我提供的教程鏈接，它至少提供了5個'ng-class'的用法。您還可以使用'ng-class'作爲函數調用來在角度控制器端進行評估。 –

如何通過$ index值獲取ng-repeat中的元素

回答

相關問題