How to monitor whether angularJs list data is rendered

This time I will bring you how to monitor angularJsWhether the list data has been rendered, monitor whether the angularJs list data has been renderedWhat are the precautions, here are the actual cases, let’s take a look one time.

When the front-end is doing data rendering, it is often encountered that certain operations are performed after the data is rendered. In the past few days, click and selection operations are performed after lists and tables are rendered. . For angularjs to deal with this type of problem, the best way is to use directives.

First, define the instruction:

app.directive('onfinishrenderfilters', function ($timeout) {
    return {
        restrict: 'A',
        link: function (scope, element, attr) {
            if (scope.$last === true) {    //判断是否是最后一条数据
                $timeout(function () {
                    scope.$emit('ngRepeatFinished'); //向父级scope传送ngRepeatFinished命令
                });
            }
        }
    };
});

Secondly, after the instruction is defined, you need to add the instruction to the iteration label, here is the label

<div class="fixed-table-container" style="margin-right: 0px;">
    <table class="table table-hover lamp-table">
        <thead>
        <tr>
            <th></th>
            <th style="text-align: center; " data-field="name_device-id" tabindex="0"
                ng-repeat="i in provider.geoZoneListHead track by $index" ng-hide=i.bol>
                <div class="th-inner sortable " style="padding-right: 10px">{{i.name}}
                </div>
                <div class="fht-cell" style="width: 101px;"></div>
            </th>
        </tr>
        </thead>
        <tbody>
        <tr ng-repeat="i in provider.geoZoneList" onfinishrenderfilters>
            <td><input data-index="0" name="btSelectItem" type="radio"
                       value="{{$index}}" ng-click="selectInput($index)"></td>
            <td class="nameId0">{{$index+1}}</td>
            <td class="nameId1">{{i.geoZoneName}}</td>
            <td class="nameId2">{{i.description}}</td>
            <td class="nameId3">{{i.totalNumberOfMembers}}</td>
            <td class="nameId4">{{i.country}}</td>
            <td class="nameId5">{{i.lastUpdateDate}}</td>
        </tr>
        </tbody>
    </table>
</div>

Finally, after the last piece of data is rendered, $emit is used to send events (commands) to the parent Scope, and $brodercast is used to send events (commands) to the child scope. And $scope.$on() listens for events, monitoring whether $emit or $brodercast sends the event (command) back. If the event has been sent back, it means that the data has been rendered, and other operations can be performed in the future.

$scope.$on('ngRepeatFinished', function (ngRepeatFinishedEvent) {    var btnList = $("input[name='btSelectItem']");
    btnList.eq(0).attr("checked","checked");
    $scope.provider.detalOutlet();
});

I believe you have mastered the methods after reading these cases. For more exciting information, please pay attention to other related articles on the php Chinese website!

Related reading:

Detailed explanation of the browser rendering process

Summary of the box model in HTML

The above is the detailed content of How to monitor whether angularJs list data is rendered. For more information, please follow other related articles on the PHP Chinese website!