Getting an element by the id after the repeat in an array - HTML / JavaScript / Angular

0

Hello, I need to get an element in the HTML after a ng-repeat, to apply CSS commands on the div on which it depends on the result coming from the database. For now I can only get this element, but the Style is only applied in the first item of the repeat, 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 get this "Scheduler" id along with some index that returns from the table in the HTML, so I can get it to run. Does anyone know of any way to use this getElementById working this way? Or some better way to do what I want in different ways?

    
asked by anonymous 15.05.2017 / 18:49

1 answer

0

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

What you can do is add a class:

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

In this way you can apply a CSS to all elements of the class scheduling 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 in some way in ng-repeat by giving a different id to each of them and then doing the same process in the for.

    
15.05.2017 / 19:17