在ngRepeat散列对象的排序值 - angularJS(sorting values of a

2019-08-03 05:04发布

我有一个这样的对象:

$scope.phones = new Object();
$scope.phones['id1'] = {
    "name":"Phone Name1",
    "dateReleased":"2012-1-09 15:48:24"
};
$scope.phones['id2'] = {
    "name": "Phone Name2",
    "dateReleased":"2012-3-12 15:32:11"
};
$scope.phones['id3'] = {
    "name": "Phone Name3",
    "dateReleased":"2012-2-10 13:53:32"
};

我显示此使用ngRepeat。 我不能够通过订购dateReleased 。 此外,订货反不工作。 我ngRepeat看起来这样的:

<li ng-repeat="phone in phones | orderBy:dateReleased:true">
    <p>{{phone.name}}</p>
    <p>{{phone.dateReleased}}</p>
</li>

Answer 1:

如果您检查文档它说,在排序依据的表达可以是一个功能 ,一个字符串数组 。 因此,一个你需要dateReleased是一个字符串:“dateReleased”

此外,你需要你的电话对象的实际阵列。

尝试:

$scope.phones = [{
        "name":"Phone Name1",
        "dateReleased":"2012-1-09 15:48:24"
    },{
        "name": "Phone Name2",
        "dateReleased":"2012-3-12 15:32:11"
    },{
        "name": "Phone Name3",
        "dateReleased":"2012-2-10 13:53:32"
    }];

<li ng-repeat="phone in phones | orderBy:'dateReleased':true">
    <p>{{phone.name}}</p>
    <p>{{phone.dateReleased}}</p>
</li>


Answer 2:

虽然ngRepeat可以遍历一个哈希对象,像$scope.phones在你的榜样,内置orderBy的过滤器将无法工作。 我认为,这是由于存储对象的方式。 至于其他的已经指出的那样,你需要哈希转换为数组。 虽然你可以做到这一点使用上述建议的方法,我更喜欢使用自定义过滤器来做到这一点。 这使我不必直接改变我的哈希值,也让我的重用与其他散列过滤器的好处。

yourApp.filter('orderObjectBy', function() {
  return function(items, field, reverse) {
    var filtered = [];
    angular.forEach(items, function(item) {
      filtered.push(item);
    });
    filtered.sort(function (a, b) {
      return (a[field] > b[field] ? 1 : -1);
    });
    if(reverse) filtered.reverse();
    return filtered;
  };
});

该过滤器将对象转换为标准阵列,并通过您指定的字段进行排序。 您可以使用orderObjectBy过滤器酷似orderBy ,包括字段名称后一个布尔值,以指定的顺序是否应该被反转。 换句话说, false的上升, true的下降。

<li ng-repeat="phone in phones | orderObjectBy:'dateReleased':true">
  <p>{{phone.name}}</p>
  <p>{{phone.dateReleased}}</p>
</li>

我有一个在我的博客文章关于这个话题。



Answer 3:

无论是其他的答案让你中途有,但不是所有的方式......

你需要创建一个对象转换为这样一个数组你的范围函数:

$scope.phonesArray = function() {
    var result = [];
    angular.forEach($scope.phones, function(phone, id) {
      result.push(phone);
    });
    return result;
};

然后你会调用,而不是在你的ngRepeat您的对象:

<li ng-repeat="phone in phonesArray() | orderBy:'dateReleased':true">
    <p>{{phone.name}}</p>
    <p>{{phone.dateReleased}}</p>
</li>

另外:请注意, 'dateReleased'是一个字符串,因此它知道$ EVAL该字符串关闭当前项目的,否则会检查父$ scope.dateReleased,它不存在。

这里是什么,我认为你试图做一个普拉克

编辑:您还可以将对象“转换”到一个数组并将其存储在$范围,如果你担心的功能,这样做太“贵”,但不应该是一个问题,因为你”重新开发一个客户方应用程序为一个用户,而不是许多用户的服务器应用程序,这意味着你有一个“贵”一点回旋余地。 (这也不会是这样)



Answer 4:

首先,你要明白, ng:filterng:orderBy使用数组(项目的有序集合)的工作,但是你想使用它们对象(_un_ordered项目的集合)。 一种可能的方法是收集所有对象到一个数组,然后入手ng-repeat就可以了吧。 像这样:

<ul ng-init="phones = [
      {name:'Phone Name 1', dateReleased:'2011-1-09 15:48:24'}
    , {name:'Phone Name 2', dateReleased:'2012-3-12 15:32:11'}
    , {name:'Phone Name 3', dateReleased:'2012-2-10 13:53:32'}]; 
    pred = '-dateReleased';" >
    <li ng-repeat="phone in phones | orderBy:pred">
        <p>{{phone.name}}</p>
        <p>{{phone.dateReleased}}</p>
    </li>
</ul>


文章来源: sorting values of a hash object in ngRepeat - angularJS