显示上AngularJs排序功能使用排序依据装载机部件 [英] Showing a loader widget on AngularJs sort feature using orderBy

问题描述

我需要出示AngularJs排序功能使用排序依据装载机部件。

I need to show a loader widget on AngularJs sort feature using orderBy.

我有对前分拣约10选项。按名称，按价格等。在我的网页，由于它的排序需要一点时间来思考我身边装载100个对象。因此，我需要此期间到显示装载机部件。

I have around 10 options for sorting for ex. By Name, By price etc. On my page I load around 100 objects due to which, the sorting takes a little time to reflect. Hence I need to show a loader widget during this interval.

基本上，一旦我点击所需的选项（即按名称，按价格等），装载机部件将显示，一旦排序完成，装载机将消失，页面呈现。

Basically, once I click the required option(ie. By Name, By price etc.), the loader widget would show and once the sorting is done, the loader goes away and the page renders.

这将是巨大的，甚至如果有人能请修改下面捣鼓这个变化。

It would be even great if someone could please modify the below fiddle with this change.

http://www.jsfiddle.net/vjF2D/

function ContactListCtrl($scope){
  $scope.sortorder = 'surname';
  $scope.contacts = 
  [
     { "name":"Richard", "surname":"Stallman", "telephone":"1234 98765" },
     { "name":"Linus", "surname":"Torvalds", "telephone":"2345 87654" },
     { "name":"Donald", "surname":"Knuth", "telephone":"3456 76543" }
  ];
 }
------------------------------------------
<div ng-app ng-controller="ContactListCtrl">
<h1>AngularJS Sorting Example</h1>

<select ng-model="sortorder">
  <option value="surname">Surname (A-Z)</option>
  <option value="-surname">Surname (Z-A)</option>
</select>

<table class="contacts">
  <tr>
    <th>Name</th>
    <th>Telephone</th>
  </tr>

  <tr ng-repeat="contact in contacts | orderBy:sortorder">
    <td ng-class-even="'even'">{{contact.name}}, {{contact.surname}}</td>
    <td ng-class-even="'even'">{{contact.telephone}}</td>
  </tr>
</table>
</div>

在此先感谢！

推荐答案

我建议你 angularjs微调，见<大骨节病>的 GitHub上 来源

I suggest you angularjs-spinner, see GitHub sources

或者

HTML

<div ng-controller="ContactListCtrl">

<h1>AngularJS Sorting Example</h1>

    <select ng-model="sortorder">
        <option value="surname">Surname (A-Z)</option>
        <option value="-surname">Surname (Z-A)</option>
    </select>
    <table class="contacts">
        <tr>
            <th>Name</th>
            <th>Telephone</th>
        </tr>
        <tr ng-repeat="contact in contacts | orderBy:sortorder" repeat-done="layoutDone()" >
            <td ng-class-even="'even'">{{contact.name}}, {{contact.surname}}</td>
            <td ng-class-even="'even'">{{contact.telephone}}</td>
        </tr>
    </table>
    <div id="veil" ng-show="isLoading"></div>
    <div id="feedLoading" ng-show="isLoading">Loading...</div>
</div>

JS

var app = angular.module('myModule', []);

app.controller('ContactListCtrl', function ($scope) {
    $scope.sortorder = 'surname';
    $scope.contacts = [{
        "name": "Richard",
        "surname": "Stallman",
        "telephone": "1234 98765"
    }, {
        "name": "Linus",
        "surname": "Torvalds",
        "telephone": "2345 87654"
    }, {
        "name": "Donald",
        "surname": "Knuth",
        "telephone": "3456 76543"
    }];

    $scope.setLoading = function (loading) {
        $scope.isLoading = loading;
    }


    $scope.layoutDone = function () {
        console.log("vvvvv");
        $scope.setLoading(false);       
    }

    $scope.loadFeed = function(url) {
            $scope.setLoading(true);

        }

    $scope.loadFeed();
});



app.directive('repeatDone', function() {
        return function(scope, element, attrs) {
            if (scope.$last) { // all are rendered
                scope.$eval(attrs.repeatDone);
            }
        }
    })

编辑的演示<大骨节病> 小提琴

这篇关于显示上AngularJs排序功能使用排序依据装载机部件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！