使用一个公共属性对两个不同对象的列表进行排序

时间:2015-12-24 13:20:59

标签: javascript angularjs

我有两个来自代表两个不同类的API的列表。我想根据它们的属性在一个通用列表中显示两个列表,其中元素按日期排序。

我需要将两个列表分开,因为要显示的属性不同,它们只共享日期。

我设法分别显示两个列表但不能合并两个...有没有人对此有所了解?非常感谢你。

这里是.js和视图:

的.js:

function activityController($http) {

    var vm = this;

    vm.race= [];
    vm.try= [];

    vm.errorMessage = "";
    vm.isBusy = true;

    $http.get("/api/race")
    .then(function (response) {
        //Sucess
        angular.copy(response.data, vm.race);

    }, function (error) {
        //Failure
        vm.errorMessage = "Failed to load the data" + error;
    })

    $http.get("/api/try")
        .then(function (response) {
            //Sucess
            angular.copy(response.data, vm.try);
        }, function (error) {
            //Failure
            vm.errorMessage = "Failed to load the data" + error;
        })

    .finally(function () {
        vm.isBusy = false;
    });


}

查看:

<div class="col-md-offset-7">
<div class="text-danger" ng-show="vm.errorMessage">{{ vm.errorMessage}}</div>
<wait-cursor ng-show="vm.isBusy"></wait-cursor>


    <ul class="well" ng-repeat="activities in vm.race| orderBy: 'date':true">
        <li> {{activities.title}}</li>
        <li>Date : {{activities.date | date :'dd-MM-yyyy'}}</li>
        <li>Temps : {{activities.time}}</li>

    </ul>

    <ul class="well" ng-repeat="activities in vm.try| orderBy: 'date':true">
        <li> {{activities.person}}</li>
        <li>Date : {{activities.date | date :'dd-MM-yyyy'}}</li>
        <li>Temps : {{activities.type}}</li>

    </ul>

1 个答案:

答案 0 :(得分:1)

我这样做的方式是:

<ul class="well" ng-repeat="activities in vm.getRacesAndTrys()| orderBy: 'date':true">
    <li> {{activities.title}}</li>
    <li>Date : {{activities.date | date :'dd-MM-yyyy'}}</li>
    <li>Temps : {{activities.time}}</li>
</ul>

使用vm中的函数:

vm.getRacesAndTrys = function() {
    var result = [];

    for (var i = 0; i < vm.try.length; i++) {
        var item = vm.try[i];
        result.push({
            title: item.person,
            date: item.date,
            time: item.type
        });
    }

    for (var i = 0; i < vm.race.length; i++) {
        result.push(vm.race[i]);
    }

    return result;
}

这将创建一个组合数组,并转换所有try个对象,使其字段与race个对象的字段匹配。