aggiungi classe al primo elemento in ng-repeat con jquery

Question

Sono nuovo alle direttive complesse e sto provando ad aggiungere una classe al primo elemento in un ng-repeat con jquery (purtroppo il mio progetto lo sta usando) come in un controller della direttiva:

var highlightFirst = function(){ 
     $('.pointer').find('.fa-angle-down-first').next().addClass('boldit'); 
     console.log('in here') 
    } 

    highlightFirst(); 

    //also tried this: 
    angular.element(document).ready(function(){ 
     $('.pointer').find('.fa-angle-down-first').next().addClass('boldit'); 
     console.log('in here') 
    }); 

Invoco la funzione subito dopo. non accade nulla.

quando eseguo $('.pointer').find('.fa-angle-down-first').next().addClass('boldit'); in strumenti di sviluppo chrome, ciò che voglio essere in grassetto è in effetti in grassetto ... cosa mi manca per ottenere questa soluzione specifica funzionante? e qual è il miglior modo angolare per fare questo?

Answer 1

Basta usare ng-classe:

<ul> 
    <li ng-repeat="item in items" ng-class="{'myClass': item == items[0]}">{{ item.property }}</li> 
</ul> 

Edit: link per maggiori dettagli

https://docs.angularjs.org/api/ng/directive/ngClass

Answer 2

In realtà non c'è bisogno di jQuery per esso e dovrebbe evitare di utilizzare jQuery per quanto possibile nelle applicazioni angolari, è necessario utilizzare ng-class e $first qui è il lavoro demo

<ul> 
    <li ng-repeat="item in items" ng-class="{'fooClass': $first}">{{ item }}</li> 
</ul> 

La cosa positiva di $first è quando si ordina lo ng-repeat che funzionerebbe ancora correttamente.

Answer 3

Proviamo questo:

$(document).ready(function(){ 
    $('.pointer').find('.fa-angle-down-first').next().addClass('boldit'); 
    console.log('in here'); 
}); 

E sulla tua primo modo:

var highlightFirst = function(){ 
    $('.pointer').find('.fa-angle-down-first').next().addClass('boldit'); 
    console.log('in here'); 
}; 

highlightFirst(); 

dovrei dire è necessario assicurarsi che il codice viene eseguito dopo pagina e gli elementi sono stati caricati.