Hello to all. Faced such a problem. I write service using angular and java. In angular there is a controller in which data is requested from the server after the page is fully loaded:

angular.element(document).ready(function () { $http({ method:'GET', url:'/getNote' }).then(function successCallback(response) { $scope.sourcesInfo = response.data; }, function errorCallback(response) { console.log("error"); }); });

After receiving the data on the page, a label is formed:

 <tbody id="serviceNote" > <tr name="data" ng-repeat="sourceInfo in sourcesInfo" ns-hover-note click-note> <td id="td_1"><a href="http://{{sourceInfo.sourceIp}}">{{sourceInfo.sourceIp}}</a></td> <td id="td_2">{{sourceInfo.sourceModel}}</td> <td id="td_3" class="tdDescription">{{sourceInfo.sourceDescription}}</td> <td id="td_4">{{sourceInfo.ownBy}}</td> <td id="td_5">{{sourceInfo.comments}}</td> <td id="due-data">{{sourceInfo.dueData}}</td> <td id="td-state">{{sourceInfo.state}}</td> </tr> </tbody>

and now there is a problem. The plate has the last field with id = "td-state" and based on the fact that there is a record busy or free, the whole td should change color. If free is green, if busy is red.

So, in the usual script there is just a type check

 var selected = document.querySelectorAll("td#td-state"); for (i = 0; i < selected.length; i++){ if (selected[i].innerHTML == 'busy'){ $(selected[i]).parent().attr('id','busy-tr'); } else if (selected[i].innerHTML == 'free'){ $(selected[i]).parent().attr('id','free-tr'); } }

And the problem is that this check is run before the get request is executed, and, accordingly, it is executed once and all.

Help to understand that it is possible to use from the means of angulara so that when a recording appears - did the check take place higher? Tried to put directives - but they also run before the request

    1 answer 1

    The check is started asynchronously. To fix this, you need to insert it into the callback function. You can also check the wrap in the function and call it in the callback.

    It should look something like this:

     angular.element(document).ready(function () { $http({ method:'GET', url:'/getNote' }).then(function(response) { $scope.sourcesInfo = response.data; isBusy(); }, function(response) { console.log("error"); }); // Функция проверки, вызовется когда данные придут с бэка function isBusy() { var selected = document.querySelectorAll("td#td-state"); for (i = 0; i < selected.length; i++){ if (selected[i].innerHTML == 'busy'){ $(selected[i]).parent().attr('id','busy-tr'); } else if (selected[i].innerHTML == 'free'){ $(selected[i]).parent().attr('id','free-tr'); } } } });

    Remarks:

    1. ID selector must be unique! In your case, you can use classes.

    2. The condition that is written using native js, mixed with the jQuery library, is quite possible ( and necessary ) to write on AngularJS.

    For example, use the ngClass directive instead of your check.

     <tbody id="serviceNote" > <tr ng-class="sourceInfo.state === 'busy' ? 'busy-tr' : 'free-tr'" name="data" ng-repeat="sourceInfo in sourcesInfo" ns-hover-note click-note> ... </tr> </tbody>

    Do not forget to add the appropriate classes with styles.

    • This also does not work out that way. If you look through the debugger, after receiving the data, the table is not yet formed, and the isBusy () method will already begin its execution. Those. there are no elements on the page, but the function searches for them - and searches for it once - Vorobey.A
    • @ Vorobey.A updated the answer - mix
    • vooooo ng-class helped!) Thank you very much!) - Vorobey.A