angularJS:动态 header 排序无效

angularJS: Dynamic header sorting not working

我正在尝试通过单击 headers,使用 AngularJS 来实现对 table 进行排序的解决方案。

我在 Google 搜索后找到了一个很好的例子:https://scotch.io/tutorials/sort-and-filter-a-table-using-angular

我可以看到向上和向下箭头,但是 table 在我单击它们时没有排序。

我认为问题在于 JSON object 在我的情况下是如何格式化的。我一直无法弄清楚,我希望通过我提供的有关此 post 的信息,我可以得到一些帮助,以了解我做错了什么。

这是 JavaScript 的副本:

    (function (define, angular) {
    'use strict';
    define(function () {

        var opportunityController = function ($scope, Metadata, Factory) {

            var vm = this;

            //set the default sort type
            vm.sortType = 'Products';            

            //set the default sort order
            vm.sortReverse = false;             

            Factory.Data(caller.sp, caller.filter).then(function (payload) {
                var data = angular.fromJson(payload.data).Table;
                ProcessData(data);
            });

            function ProcessData(data) {
                if (angular.isDefined(data)) {
                    var counter = 0;
                    vm.products = [];
                    vm.productsSet = FindByAsObjectArray(function (x) {
                        return (x.TypeName == "Product");
                    }, data);

                    for (var index = 0, length = vm.productsSet.length; index < length; index++) {
                        vm.products[index] = {
                            data: vm.productsSet[index]
                        };                                                
                    }
                }                    
            }
        };
        return ['$scope','Metadata','Factory',opportunityController];
    });
})(define, angular);

我成功了,最终版本:https://jsfiddle.net/itortu/nhhppf53/

非常感谢。

您正在使用 controllerAs

ng-controller="Company:OpportunityController as opportunity"

因此,您必须在 ng-click 中引用 sortType 和 sortReverse,如下所示:

ng-click="opportunity.sortType = 'Products'; opportunity.sortReverse = !opportunity.sortReverse"