在angularJS中按动态属性排序

Question

我正在尝试以角度创建电子表格。

我已经完成了大部分基本功能，但我找不到使用我目前拥有的数据结构按单列排序的方法。

这是Plnkr

你认为我应该改变数据结构，为不同的列设置一个单独的数组，还是可以和这个一起工作？

目前它只是在单元格中的值发生更改时为范围对象生成动态属性。

这是生成和计算单元格值的代码。

 process = function (exp) {
        return exp.replace(/[A-Z]\d+/g, function (ref) {
            return 'result("' + ref + '")';
        })
    }



    $scope.result = function (cell) {
        if ($scope.cells[cell]) {
            if (stringStartsWith($scope.cells[cell], "=")) {
                var val = $scope.cells[cell].substring(1);
                return $parse(process(val))($scope);
            }
            else {
                return $scope.cells[cell];
            }
        }
        else {
            return $scope.cells[cell];
        }

    };

Answer 1

您可能会发现数组（多）排序器实用程序很有用 here（根据需要使用）

源代码：

    // Array multi - sorter utility
    // returns a sorter that can (sub-)sort by multiple (nested) fields 
    // each ascending or descending independantly
    // https://github.com/foo123/sinful.js
    [Array, 'sorter', function () {

        var arr = this, i, args = arguments, l = args.length,
            a, b, avar, bvar, variables, step, lt, gt,
            field, filter_args, sorter_args, desc, dir, sorter,
            ASC = '|^', DESC = '|v';
        // |^ after a (nested) field indicates ascending sorting (default), 
        // example "a.b.c|^"
        // |v after a (nested) field indicates descending sorting, 
        // example "b.c.d|v"
        if ( l )
        {
            step = 1;
            sorter = [];
            variables = [];
            sorter_args = [];
            filter_args = []; 
            for (i=l-1; i>=0; i--)
            {
                field = args[i];
                // if is array, it contains a filter function as well
                filter_args.unshift('f'+i);
                if ( field.push )
                {
                    sorter_args.unshift(field[1]);
                    field = field[0];
                }
                else
                {
                    sorter_args.unshift(null);
                }
                dir = field.slice(-2);
                if ( DESC === dir ) 
                {
                    desc = true;
                    field = field.slice(0,-2);
                }
                else if ( ASC === dir )
                {
                    desc = false;
                    field = field.slice(0,-2);
                }
                else
                {
                    // default ASC
                    desc = false;
                }
                field = field.length ? '["' + field.split('.').join('"]["') + '"]' : '';
                a = "a"+field; b = "b"+field;
                if ( sorter_args[0] ) 
                {
                    a = filter_args[0] + '(' + a + ')';
                    b = filter_args[0] + '(' + b + ')';
                }
                avar = 'a_'+i; bvar = 'b_'+i;
                variables.unshift(''+avar+'='+a+','+bvar+'='+b+'');
                lt = desc ?(''+step):('-'+step); gt = desc ?('-'+step):(''+step);
                sorter.unshift("("+avar+" < "+bvar+" ? "+lt+" : ("+avar+" > "+bvar+" ? "+gt+" : 0))");
                step <<= 1;
            }
            // use optional custom filters as well
            return (new Function(
                    filter_args.join(','), 
                    ['return function(a,b) {',
                     '  var '+variables.join(',')+';',
                     '  return '+sorter.join('+')+';',
                     '};'].join("\n")
                    ))
                    .apply(null, sorter_args);
        }
        else
        {
            a = "a"; b = "b"; lt = '-1'; gt = '1';
            sorter = ""+a+" < "+b+" ? "+lt+" : ("+a+" > "+b+" ? "+gt+" : 0)";
            return new Function("a,b", 'return '+sorter+';');
        }
    }],

测试示例：

var arr = [
    {f1: 1, f2: {f3: 3} },
    {f1: 1, f2: {f3: -4} },
    {f1: -1, f2: {f3: 2} }
];
// field f1 asc, field f2.f3 desc
var multiSorter = Array.sorter('f1|^','f2.f3|v');
// field f1 asc, field f2.f3 desc using custom filter
var multiSorterFilter = Array.sorter('f1|^',['f2.f3|v', function(f){return -f;}]);

require('assert').deepEqual(arr.sort(multiSorter), [{f1: -1, f2: {f3: 2} },{f1: 1, f2: {f3: 3} },{f1: 1, f2: {f3: -4}}]);
require('assert').deepEqual(arr.sort(multiSorterFilter), [{f1: -1, f2: {f3: 2} },{f1: 1, f2: {f3: -4} },{f1: 1, f2: {f3: 3}}]);