Question

我正在构建一个渲染表的角度组件，而我遇到了一些排序函数的问题。这种情况下的范围如下：

$scope.listState = {
    sortBy: '<string>',
    sortReverse: <bool>,
    headings: {...},
    list: [
        {
            rowCols: {
                user: 'timfranks@gmail.com',
                name: 'Tim Franks',
                since: '11/6/12'
            }
            rowState: {...}
        },
        {
            {
                user: 'albertjohns@sbcglobal.net',
                name: 'Alber Johns',
                since: '11/12/13'
            },
            rowState: {...}
        },
        {
            {
                user: 'johnsmith@sine.com',
                name: 'John Smith',
                since: '7/28/14'
            },
            rowState: {...}
        }
    ]
};

我最初尝试通过以下方式对列表进行排序：

ng-repeat="row in $ctrl.list | orderBy:$ctrl.listState.sortBy:$ctrl.listState.sortReverse"

这不起作用，虽然在使用调试器进行跟踪时，我发现orderBy实际上是获取正确的参数并返回正确排序的列表。为了确定，我更改了代码以在我的控制器中使用orderBy，如下所示：

this.listState.list = _this.orderBy(listState.list, 'rowCols.' +  listState.sortBy, listState.sortReverse);

这是第一次（在构造函数中调用），但随后停止工作。我很确定这是Angular范围的某些方面，我并不完全理解。任何帮助将不胜感激。

Answer 1

在ng-repeat表达式中使用过滤器不会更新原始模型，而是创建数组的副本。

你使用this.listState.list = _this.orderBy(...)走在正确的轨道上......只有一次调用它才有意义。

如果listState.list模型在控制器加载后获得新值并且您想要使用这些新值，则可能需要使用以下内容：

$scope.$watchCollection('listState.list', function listChanged(newList, oldList){
    $scope.listState.list = _this.orderBy(...);
});

如果订单发生变化，$watchCollection是否会注册更改，我无法回想起，但如果您最终使用该代码进行无限循环，则可以设置阻止程序：

var listSorting = false;
$scope.$watchCollection('listState.list', function listChanged(newList, oldList){
    if(!listSorting){
        listSorting = true;
        $scope.listState.list = _this.orderBy(...);
        $timeout(function resetSortBlock(){ // try it without the $timeout to see if it will work
            listSorting = false;
        });
    }
});

Answer 2

想出来。问题是我使用了属性指令来呈现列表行，而属性指令和ng-repeat在同一个元素上。这在两个指令之间产生了范围冲突。我将我的指令移到了ng-repeat内的一个div，它运行正常。

orderBy之后角度范围不更新

2 个答案: