Showing a loader widget on AngularJs sort feature using orderBy

问题

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

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>

Thanks in advance !!!

回答1:

I suggest you angularjs-spinner, see GitHub sources

Or:

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);
            }
        }
    })

The edited Demo Fiddle

回答2:

Thanks to Maxim Shoustin for solving my queries. Kudos to him for providing the below working jsfiddle example :

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

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

app.controller('ContactListCtrl', function ($scope, $timeout, $filter) {

var sortingOrder = 'name';
$scope.sortingOrder = sortingOrder;



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

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


$scope.layoutDone = function (value) {
    console.log(value);
    $scope.setLoading(true);

     $timeout(function() { 
    // take care of the sorting order
    if ($scope.sortingOrder !== '') {

        if(value == 'surname'){
        $scope.contacts = $filter('orderBy')($scope.contacts, $scope.sortingOrder, false);
        }
        else if(value == '-surname'){
        $scope.contacts = $filter('orderBy')($scope.contacts, $scope.sortingOrder, true);
        }
        else{
          $scope.contacts = $filter('orderBy')($scope.contacts, $scope.sortingOrder, false);  
        }
    }




            $scope.setLoading(false);
        }, 1000);


  }

   $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);
        }
    }
})

来源：https://stackoverflow.com/questions/19354782/showing-a-loader-widget-on-angularjs-sort-feature-using-orderby