Question

我需要使用orderBy在AngularJs排序功能上显示加载器小部件。

我有大约10个选项来排序ex。按名称，按价格等。在我的页面上，我加载了大约100个对象，因此，排序需要一点时间来反映。因此，我需要在此间隔期间显示加载程序小部件。

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

如果有人可以通过这种改变来修改下面的小提琴，那就太棒了。

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>

提前致谢!!!

Answer 1

我建议您angularjs-spinner，参见 GitHub 来源

或者：

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

已编辑的演示 Fiddle

Answer 2

感谢 Maxim Shoustin 解决我的疑问。感谢他提供以下工作jsfiddle的例子：

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

使用orderBy在AngularJs排序功能上显示加载器小部件

2 个答案: