javascript - Regarding ng-repeat, is there a problem in getting the elements after DOM rendering?

Question

After I use ng-repeat to render the data, I want to modify the style of a specified DOM element. The following is a sample code

    <ul ng-repeat="item in city" repeat-done="cityFinish()">
        <li class="city city{{$index}}">{{item}}</li>
    </ul>

    $scope.cityFinish = function() {
        $('.city').css('background', 'red');
        $('.city1').css('background', 'green');
    };

Where $('.city').css('background', 'red'); is valid, but $('.city1').css('background', ' green'); is invalid, what is the reason?

Answer 1

It is possible to try in my project. city{{$index}} is from city0. You can check the element to see if the class has changed to city1, and then you can try the breakpoint $('.city1') to see if the dom element is obtained

Answer 2

You review the elements first. Make sure its class is correct.
First of all, I don’t know how to write your repeat-done. This should not come with angularjs.
Secondly, why not write the color into css and then use ng-class or ng-style to process it. You must use jQuery.

Is your requirement that except for the background color with index 1, which is green, everything else is red?

<ul ng-repeat="(index, item) in city">
  <li class="bg-red" ng-class="{'bg-green': $index == 1}">{{item}}</li>
</ul>

.bg-red {
  background: 'red';
}

.bg-green {
  background: 'green';
}

If you can’t use jQuery, don’t use it, not to mention you have the built-in jqLite to use. . . jQuery is a third-party library. If you do not package it for angularjs, then you cannot guarantee that its execution will be after the node is generated, especially for custom directives.