Heim > Web-Frontend > js-Tutorial > Hauptteil

So überwachen Sie, ob AngularJs-Listendaten gerendert werden

php中世界最好的语言
Freigeben: 2018-02-27 10:11:59
Original
1714 Leute haben es durchsucht

Dieses Mal zeige ich Ihnen, wie Sie AngularJs überwachen, ob die Listendaten gerendert werden, und wie Sie überwachen, ob die AngularJs-Listendaten gerendert werden. Welche Vorsichtsmaßnahmen gibt es? Hier sind die praktischen Fälle . Lasst uns einmal einen Blick darauf werfen.

Wenn das Front-End Daten rendert, kommt es häufig vor, dass bestimmte Vorgänge nach dem Rendern der Daten ausgeführt werden. In den letzten Tagen wurden Klick- und Auswahlvorgänge nach Listen und Tabellen ausgeführt werden gerendert. Damit AngularJS diese Art von Problem lösen kann, ist die Verwendung von Direktiven der beste Weg.

Definieren Sie zunächst die Anweisung:

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

Zweitens müssen Sie nach der Definition der Anweisung die Anweisung zum Iterations-Tag hinzufügen. Hier ist das -Tag

<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>
Nach dem Login kopieren

Abschließend, nachdem das letzte Datenelement gerendert wurde, wird $emit verwendet, um Ereignisse (Befehle) an den übergeordneten Bereich zu senden, und $brodercast wird verwendet, um Ereignisse (Befehle) an den untergeordneten Bereich zu senden. Und $scope.$on() wartet auf Ereignisse und überwacht, ob $emit oder $brodercast das Ereignis (den Befehl) zurücksendet. Wenn das Ereignis zurückgesendet wurde, bedeutet dies, dass die Daten gerendert wurden und andere Vorgänge ausgeführt werden können in der Zukunft.

$scope.$on(&#39;ngRepeatFinished&#39;, function (ngRepeatFinishedEvent) {    var btnList = $("input[name=&#39;btSelectItem&#39;]");
    btnList.eq(0).attr("checked","checked");
    $scope.provider.detalOutlet();
});
Nach dem Login kopieren

Ich glaube, dass Sie die Methoden beherrschen, nachdem Sie diese Fälle gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Verwandte Lektüre:

Detaillierte Erläuterung des Browser-Rendering-Prozesses

Zusammenfassung des Box-Modells in HTML

Das obige ist der detaillierte Inhalt vonSo überwachen Sie, ob AngularJs-Listendaten gerendert werden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage