Question

我不知道为什么orderBy没有使用trackBy，它让我发疯:(

这是我的HTML代码：

        <div class="blocks-container" ng-init="loadProjects()" ng-controller="buildMonitorController">
<div class="row">
   <!-- <div> -->
        <div class="col-xs-12 col-sm-6 col-md-3 col-lg-2 block animate"
             ng-if="!errorDialogActive"
             ng-repeat="build in builds.builds.build track by build._id | orderBy:'lastBuildDetails.startDate' : true"
             ng-class="{'running': project.running ,'block-green': build._status ==='SUCCESS','block-red': build._status==='FAILURE'}"
             id="{{build._id}}">
            <div class="title-container"><p>{{build._buildTypeId}}</p></div>
            <div class="update-container col-xs-12">
            <time>{{ build.lastBuildDetails.startDate | date : 'dd.MM.yyyy H:mm:s'}}</time>
            </div>
        </div>
    </div>
    <!--</div>-->

<!-- Start error state dialog -->
<div ng-include src="'views/main/error-dialog.html'"></div>

即使我改变订单以反转

，每次都给我相同的结果

这是我的AngularJS代码：

    $scope.refreshBuilds = function () {
    $scope.errorList.length = 0
    //@TODO remove this part right after the API is working
    //Init
    var suffix = '';
    var randomnumber = Math.floor(Math.random() * 3);


    //simulate mock by random number
    switch (randomnumber) {

        case 1:
            suffix = '-success';
            break;

        case 2:
            suffix = '-less';
            break;

        default:
            break;
    }

    var url = 'mock/builds'+suffix+'.xml';
    console.log('url: ' + url)
    $http({
        method: 'GET',
        url: url,
        headers: {
            Authorization: 'Basic AAA'
        }
    }).success(function (data, status) {
        //Recive builds from xml and reset scope
        var buildsToFilter = new X2JS().xml_str2json(data);
        $scope.errorDialogActive = false;
        //filter builds which have a no build API detail status
        if (buildsToFilter.builds.build !== undefined) {
            angular.forEach(buildsToFilter.builds.build, function (build, index) {
                $http({
                    method: 'GET',
                    url: 'mock/build-'+build._id+'.xml',
                    headers: {
                        Authorization: 'Basic AAA'
                    }
                }).success(function (buildDetailData) {
                    $scope.errorDialogActive = false;
                    //push detail data into build array
                    buildsToFilter.builds.build[index].lastBuildDetails = new X2JS().xml_str2json(buildDetailData).build;
                    console.log(buildsToFilter.builds.build[index]);

                }).error(function (data, status) {
                    $scope.errorDialogActive = true;
                    //remove build from index if no build detail was found
                    buildsToFilter.builds.build.splice(index, 1);
                    $scope.setError(status, '', '');
                }).then(function () {
                    //after filtering builds to display, setup builds $scope for FrontEnd
                    $scope.builds = buildsToFilter;
                });
            });
        } else {

        }

    }).error(function (data, status) {

        //active dialog if error happens & set error
        $scope.errorDialogActive = true;
        $scope.setError(status, 'builds', '');
    }).then(function () {

        $timeout(function () {
            $scope.finishedRequest = true; 
        }, 5000);


        //refresh right after proceed and a little delay
        $timeout(function () {
            console.log('Starting refresh');
            $scope.refreshBuilds();
        }, 21000);


    })
};

如果您需要更多代码，请告诉我

Answer 1

尝试阅读文档。您似乎没有正确使用它。

https://docs.angularjs.org/api/ng/filter/orderBy

最后一个参数只能是“反向”。

将'track by build._id'移动到表达式的末尾（在orderBy之后）。

ng-repeat="build in builds.builds.build track by build._id | orderBy:'lastBuildDetails.startDate'

AngularJS orderBy不使用trackBy

1 个答案: