如何为 ng-repeat orderBy 创建回调?

问题描述

正在寻找一种方法让 AngularJS 的 ng-repeat orderBy 过滤器在渲染完成后进行回调...

标记:

 
<表格><头><tr><th ng-click="sort('name')">名称:</th><th ng-click="sort('age')">年龄:</th></tr></thead><tr ng-repeat="项目中的项目 | orderBy:sortColumn:reverseSort"><td>{{item.name}}</td><td>{{item.age}}</td></tr></tbody>

JS:

var myApp = angular.module('myApp', []);函数 MyCtrl($scope) {$scope.items = [{"name": "约翰",年龄":25}, {"name": "艾米",年龄":75}, {"name": "莎拉",年龄":12}, {"name": "马特",年龄":55}, {"name": "Xaviour",年龄":2}];$scope.sortColumn = 'name';$scope.reverseSort = false;$scope.sort = 函数(列){$scope.sortColumn = 列；$scope.reverseSort = !$scope.reverseSort;};$scope.sortRenderFinished = function(){console.log('完成渲染！');//做点什么};}

JSfiddle

如您所见.. 一旦 orderBy 过滤器完成执行并更改表行的顺序，我希望看到类似 $scope.sortRenderFinished() 之类的东西.

任何帮助将不胜感激！:-)

解决方案

像往常一样，我把问题想得太多了..

只需要创建自定义排序函数并手动管理数组，而不是依赖 ng-repeat 指令中的 orderBy 过滤器:

var myApp = angular.module('myApp', []);

function MyCtrl($scope, $filter) {$scope.items = [{"name": "约翰",年龄":25}, {"name": "艾米",年龄":75}, {"name": "莎拉",年龄":12，}, {"name": "马特",年龄":55}, {"name": "Xaviour",年龄":2}];$scope.addChild = 函数 () {无功matt = $scope.items[findIndexByKeyValue($scope.items, 'name', 'Matt')],萨凡纳 = {"name": "萨凡纳",年龄":2，父母":马特};console.log('matt');控制台日志(马特)；$scope.items.splice($scope.items.indexOf(matt) + 1, 0, savannah);matt.child = 大草原；$scope.matt = 马特；$scope.savannah = savannah;};var findIndexByKeyValue = 函数(对象，键，值){for (var i = 0; i < obj.length; i++) {如果 (obj[i][key] == 值) {返回我；}}返回空；};$scope.sortColumnExp = '';$scope.sort = 函数(列){$scope.sortColumnExp = ($scope.sortColumnExp.indexOf('-') == 0) ?列:'-' + 列；控制台日志($scope.sortColumnExp)；如果($scope.savannah){$scope.items.splice($scope.items.indexOf($scope.savannah), 1);}$scope.items = $filter('orderBy')($scope.items, $scope.sortColumnExp);如果($scope.savannah){$scope.items.splice($scope.items.indexOf($scope.savannah.parent) + 1, 0, $scope.savannah);}};}

工作 JSFiddle 为我想做的事...感谢@LcLk 提供面包屑上面..

Looking for a way to get AngularJS'a ng-repeat orderBy filter to do a callback once it's done rendering...

Markup:

    <div ng-controller="MyCtrl">
    <table>
        <thead>
            <tr>
                <th ng-click="sort('name')">Name:</th>
                <th ng-click="sort('age')">Age:</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="item in items | orderBy:sortColumn:reverseSort">
                <td>{{item.name}}</td>
                <td>{{item.age}}</td>
            </tr>
        </tbody>
    </table>
</div>

JS:

var myApp = angular.module('myApp', []);

function MyCtrl($scope) {
    $scope.items = [{
        "name": "John",
            "age": 25
    }, {
        "name": "Amy",
            "age": 75
    }, {
        "name": "Sarah",
            "age": 12
    }, {
        "name": "Matt",
            "age": 55
    }, {
        "name": "Xaviour",
            "age": 2
    }];

    $scope.sortColumn = 'name';
    $scope.reverseSort = false;

    $scope.sort = function (column) {
        $scope.sortColumn = column;
        $scope.reverseSort = !$scope.reverseSort;
    };

    $scope.sortRenderFinished = function(){
        console.log('Done Rendering!');
        //Do something
    };
}

JSfiddle

As you can see.. I'd like to see something like $scope.sortRenderFinished() fire once the orderBy filter is done executing and changing the order of the table rows.

Any help would be MUCH appreciated! :-)

解决方案

As usual I was over-thinking the problem..

Just needed to create a custom sort function and manage the array manually instead of relying on the orderBy filter in the ng-repeat directive:

var myApp = angular.module('myApp', []);

function MyCtrl($scope, $filter) {
    $scope.items = [{
        "name": "John",
            "age": 25
    }, {
        "name": "Amy",
            "age": 75
    }, {
        "name": "Sarah",
            "age": 12,
    }, {
        "name": "Matt",
            "age": 55
    }, {
        "name": "Xaviour",
            "age": 2
    }];



    $scope.addChild = function () {
        var
        matt = $scope.items[findIndexByKeyValue($scope.items, 'name', 'Matt')],
            savannah = {
                "name": "Savannah",
                    "age": 2,
                    "parent": matt
            };

        console.log('matt');
        console.log(matt);

        $scope.items.splice($scope.items.indexOf(matt) + 1, 0, savannah);
        matt.child = savannah;
        $scope.matt = matt;
        $scope.savannah = savannah;
    };

    var findIndexByKeyValue = function (obj, key, value) {
        for (var i = 0; i < obj.length; i++) {
            if (obj[i][key] == value) {
                return i;
            }
        }
        return null;
    };


    $scope.sortColumnExp = '';

    $scope.sort = function (column) {
        $scope.sortColumnExp = ($scope.sortColumnExp.indexOf('-') == 0) ? column : '-' + column;
        console.log($scope.sortColumnExp);
        if ($scope.savannah) {
            $scope.items.splice($scope.items.indexOf($scope.savannah), 1);
        }
        $scope.items = $filter('orderBy')($scope.items, $scope.sortColumnExp);
        if ($scope.savannah) {
            $scope.items.splice($scope.items.indexOf($scope.savannah.parent) + 1, 0, $scope.savannah);
        }
    };

}

Working JSFiddle for what I was trying to do... Thanks to @LcLk for the breadcrumb above..

这篇关于如何为 ng-repeat orderBy 创建回调?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！