How to monitor whether angularJs list data is rendered-JS Tutorial-php.cn

How to monitor whether angularJs list data is rendered

php中世界最好的语言

Release： 2018-02-27 10:11:59

Original

1718 people have browsed it

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(&#39;onfinishrenderfilters&#39;, function ($timeout) {
    return {
        restrict: &#39;A&#39;,
        link: function (scope, element, attr) {
            if (scope.$last === true) {    //判断是否是最后一条数据
                $timeout(function () {
                    scope.$emit(&#39;ngRepeatFinished&#39;); //向父级scope传送ngRepeatFinished命令
                });
            }
        }
    };
});

Copy after login

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>

Copy after login

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(&#39;ngRepeatFinished&#39;, function (ngRepeatFinishedEvent) {    var btnList = $("input[name=&#39;btSelectItem&#39;]");
    btnList.eq(0).attr("checked","checked");
    $scope.provider.detalOutlet();
});

Copy after login

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!