2

我正在尝试使用自定义 orderBy 函数。最初，我希望数据按添加到的顺序显示$scope.rows，并且只有在单击列标题后才应按特定属性排序。这是我的小提琴：

http://jsfiddle.net/S8M4c/

这是我的看法：

<table ng-app ng-controller="ctrl">
    <tr>
        <th><a ng-click="orderBy = 'id'">ID</a></th>
        <th><a ng-click="orderBy = 'name'">Name</a></th>
    </tr>
    <tr ng-repeat="row in rows | orderBy:mySort">
        <td>{{row.object.id}}</td>
        <td>{{row.object.name}}</td>
    </tr>
</table>

这是我的控制器：

function ctrl($scope)
{
    // Initially, we don't sort by anything
    $scope.orderBy = "";
    $scope.rows = [];

    // Add some rows
    for(var i = 10;i < 30;i++)
    {
        $scope.rows.push({settings: {foo: true}, object: {id: i, name: "Name " + i}})   
    };

    $scope.mySort = function(row)
    {
        if($scope.orderBy != "")
        {
            return row.object[$scope.orderBy];
        }

        // What do I return here??
        return "";
    }
}

如果$scope.orderBy未设置并且我想按$scope.rows原始顺序返回，我应该返回什么$scope.mySort？我不能return row.object.id，因为不能保证按 ID 顺序添加行。在 Chrome 32 上按原样运行我的代码，出现的第一行的 ID 为 20，即中间行。

4

3 回答 3

2

return $scope.rows.indexOf(row);

（小提琴。）

orderBy您还可以通过提供一个返回默认谓词的函数来开箱即用地做到这一点：

控制器：

$scope.mySort = $scope.unsorted = function(row)
    {
        return $scope.rows.indexOf(row);
    }

看法：

<div ng-app ng-controller="ctrl">
    <table>
        <tr>
            <th><a ng-click="mySort = 'object.id'">ID</a></th>
            <th><a ng-click="mySort = 'object.name'">Name</a></th>
        </tr>
        <tr ng-repeat="row in rows | orderBy:mySort">
            <td>{{row.object.id}}</td>
            <td>{{row.object.name}}</td>
        </tr>
    </table>
    <button ng-click="mySort = unsorted;">Original Sort</button>
</div>

在这里拉小提琴。（我更改了对象中使用的数字，以便按 id 排序、按名称排序和原始排序不完全相同。）

于 2015-04-24T18:06:59.777 回答
1

创建对象数组的副本，然后排序变得微不足道：

控制器：

$scope.objects = [];

angular.forEach($scope.rows, function(row){
    $scope.objects.push(row.object);
});

看法：

<tr ng-repeat="object in objects | orderBy:orderBy">
    <td>{{object.id}}</td>
    <td>{{object.name}}</td>
</tr>

不需要 mySort 函数。

于 2014-01-30T20:07:03.470 回答
1

我认为你必须编写自己的sortby函数。原始 angularsorderBy是一个常规过滤器，它返回排序后的数组。您的过滤器可能如下所示：

.filter('mySort', function(){
    return function(values, param){
        if(param===''){
            return values;
        }else{
             // very important! create a copy of the array - otherwise 
             // the $wtachCollection function will fire to often!
             var arrayCopy = [];
             for ( var i = 0; i < values.length; i++) { arrayCopy.push(values[i]); }

            return arrayCopy.sort(function(a,b){
                var v1 = a.object[param];
                var v2 = b.object[param];
                // you know best how to sort it!
                if (v1 === v2) return 0;
                return v1 < v2 ? -1 : 1;
            });   
        }
    }
})

您可以通过以下方式使用此过滤器：

<table ng-app="myApp" ng-controller="ctrl">
    <tr>
        <th><a ng-click="orderBy = 'id'">ID</a></th>
        <th><a ng-click="orderBy = 'name'">Name</a></th>
    </tr>
    <tr ng-repeat="row in rows | mySort:orderBy">
        <td>{{row.object.id}}</td>
        <td>{{row.object.name}}</td>
    </tr>
</table>

这是您修改后的小提琴： http: //jsfiddle.net/spRf6/我已经稍微更改了名称，因此您可能会看到排序工作。

于 2014-01-30T20:02:29.097 回答