angularJS:动态标题排序不起作用

时间:2015-12-16 18:15:31

标签: javascript angularjs sorting angularjs-orderby

我正在尝试使用AngularJS通过单击其标题来实现对表进行排序的解决方案。

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

我可以看到向上和向下箭头,但是当我点击它时表格不会排序。

我认为问题在于如何在我的情况下格式化JSON对象。我无法弄清楚,我希望通过我在这篇文章中提供的信息,我可以得到一些帮助,以了解我做错了什么。

以下是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/

非常感谢。

1 个答案:

答案 0 :(得分:0)

您正在使用controllerAs

ng-controller="Company:OpportunityController as opportunity"
因此,您必须在ng-click中引用sortType和sortReverse,如下所示:

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