Picking an element by id after repeat in an array - HTML/Javascript/Angular

Question

Hello, I need to take an HTML element after an ng-repeat, to apply CSS commands in the div in which it depends on the result that comes from the database. For now I can only catch this element, but Style is applied only in the first repeat item, and I need to apply in the others also with different Style’s. Is there any better way to get this element through an index?

HTML code:

<tr ng-repeat = "fornecedor in fornecedores" on-finish-render="ngRepeatFinished">
        <td>{{fornecedor.nome}}</td>
        <td>
           <div class="chart-agendamento">
                <div id="agendamento">{{fornecedor.agendamento}}</div>
            </div>
        </td>
<tr>

Javascript code

$scope.$on('ngRepeatFinished', function(ngRepeatFinishedEvent) {
    for(var i = 0; i < $scope.fornecedores.length; i++){
        document.getElementById('agendamento').style.width="100px";
    }

What I need to do is basically take this "Schedule" id along with some index that comes back from the table in HTML, so I can run it. Does anyone know any way to use this getElementById working that way? Or some better way to do what I want in different ways?

Answer 1

You cannot have two elements with the same id (identifier) in your HTML. CSS is only being applied to the first because of this.

What you can do is add a class:

<div class="agendamento">{{fornecedor.agendamento}}</div>

This way you can apply a CSS to all elements of the scheduling class like this:

$scope.$on('ngRepeatFinished', function(ngRepeatFinishedEvent) {        

        document.getElementsByClassName('agendamento').style.width="100px";
}

If you need to put a different style for each element, you will need to differentiate them somehow in ng-repeat by giving a different id for each of them and then doing the same process in for.