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

我需要使用orderBy在AngularJs排序特性上显示一个loader小部件

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

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

如果有人能修改一下下面的小提琴，修改一下，那就太好了

函数ContactListCtrl（$scope）{
$scope.sortorder='姓氏'；
$scope.contacts=
[
{“姓名”：“Richard”，“姓氏”：“Stallman”，“电话”：“123498765”}，
{“姓名”：“李纳斯”，“姓氏”：“托瓦尔兹”，“电话”：“234587654”}，
{“姓名”：“唐纳德”，“姓氏”：“克努特”，“电话”：“3456 76543”}
];
}
------------------------------------------
AngularJS排序示例
姓氏（A-Z）
姓氏（Z-A）
名称
电话
{{contact.name}，{{contact.name}
{{联系电话}

---

提前感谢

我建议您

angularjs spinner

，请参阅资料来源

或：

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>

---

编辑的演示

我建议您

angularjs微调器

，请参阅源代码

或：

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>

编辑的演示

感谢Maxim Shoustin解决了我的问题。感谢他提供了以下工作示例：

感谢Maxim Shoustin解决了我的问题。感谢他提供了以下工作示例：

---

谢谢你的回复。我正在经历这件事，一旦做完，我会让你知道的。再次感谢你！！！我刚刚在layoutDone方法中放置了一个警报语句。但是，当我更改排序选项时，警报没有得到调用。我不确定orderBy是否每次都会导致ng repeat呈现整个列表。当然，因为我仅在加载时调用它，所以必须将

ng change

添加到

中才能在更改时调用此方法。我如何在选择选项中的每次更改中呈现ng repeat。我对AngularJs不太熟悉，很抱歉一再打扰您。谢谢您的回复。我正在经历这件事，一旦做完，我会让你知道的。再次感谢你！！！我刚刚在layoutDone方法中放置了一个警报语句。但是，当我更改排序选项时，警报没有得到调用。我不确定orderBy是否每次都会导致ng repeat呈现整个列表。当然，因为我仅在加载时调用它，所以必须将

ng change

添加到

中才能在更改时调用此方法。我如何在选择选项中的每次更改中呈现ng repeat。我对AngularJs不太熟悉，很抱歉一再打扰您。让我们一起来

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

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