使用 orderBy 在 AngularJs 排序功能上显示加载器小部件 [英] Showing a loader widget on AngularJs sort feature using orderBy

问题描述

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

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

基本上，一旦我点击所需的选项(即按名称、按价格等)，加载器小部件就会显示，一旦排序完成，加载器就会消失并呈现页面.

如果有人可以修改下面的小提琴，那就太好了.

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

function ContactListCtrl($scope){$scope.sortorder = '姓氏';$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 排序示例</h1><选择 ng-model="排序顺序"><option value="surname">Surname (A-Z)</option><option value="-surname">姓氏 (Z-A)</option></选择><table class="联系人"><tr><th>姓名</th><th>电话</th></tr><tr ng-repeat="联系人中的联系人 | orderBy:sortorder"><td ng-class-even="'even'">{{contact.name}}, {{contact.surname}}</td><td ng-class-even="'even'">{{contact.telephone}}</td></tr>

提前致谢！！！

解决方案

我建议你angularjs-spinner，见GitHub 来源

或者:

HTML

<h1>AngularJS 排序示例</h1><选择 ng-model="排序顺序"><option value="surname">Surname (A-Z)</option><option value="-surname">姓氏 (Z-A)</option></选择><table class="联系人"><tr><th>姓名</th><th>电话</th></tr><tr ng-repeat="联系人中的联系人 | orderBy:sortorder" repeat-done="layoutDone()" ><td ng-class-even="'even'">{{contact.name}}, {{contact.surname}}</td><td ng-class-even="'even'">{{contact.telephone}}</td></tr><div id="veil" ng-show="isLoading"></div><div id="feedLoading" ng-show="isLoading">正在加载...</div>

JS

var app = angular.module('myModule', []);app.controller('ContactListCtrl', function ($scope) {$scope.sortorder = '姓氏';$scope.contacts = [{"name": "理查德","姓氏": "斯托曼",电话":1234 98765"}, {"name": "莱纳斯","姓氏": "托瓦兹",电话":2345 87654"}, {"name": "唐纳德","surname": "Knuth",电话":3456 76543"}];$scope.setLoading = 函数(加载){$scope.isLoading = 加载；}$scope.layoutDone = 函数 () {console.log("vvvvv");$scope.setLoading(false);}$scope.loadFeed = 函数(网址){$scope.setLoading(true);}$scope.loadFeed();});app.directive('repeatDone', function() {返回函数(范围，元素，属性){if (scope.$last) {//所有都被渲染范围.$eval(attrs.repeatDone);}}})

编辑过的Demo Fiddle

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 !!!

解决方案

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

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