javascript 使用 $filter 根据 Angular 控制器中的属性对对象数组进行排序

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/32099716/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-28 14:51:23  来源:igfitidea点击:

Sorting an array of objects based on a property in an Angular controller using $filter

javascriptarraysangularjsobject

提问by Rodrigo Galindez

I have an array of objects called $scope.segmentslike this:

我有一个$scope.segments像这样调用的对象数组:

[
  {
    "_id": "55d1167655745c8d3679cdb5",
    "job_id": "55d0a6feab0332116d74b253",
    "status": "available",
    "sequence": 1,
    "body_original": "Such a fork",
    "__v": 0,
    "body_translated": "Tal bifurcación"
  },
  {
    "_id": "55d1167655745c8d3679cdb4",
    "job_id": "55d0a6feab0332116d74b253",
    "status": "available",
    "sequence": 0,
    "body_original": "So this is it.",
    "__v": 0,
    "body_translated": "Así que esto es."
  }
]

I need to order this by array by sequence. So, I need the sequence 0 to appear first, the sequence 1 to appear next, and so on. In a view, I'm doing this and it works:

我需要按顺序按数组排序。所以,我需要先出现序列 0,接下来出现序列 1,依此类推。在一个视图中,我正在这样做并且它有效:

<ul ng-repeat="segment in segments | orderBy: 'sequence'">
    <li>{{ segment.sequence }}</li>
</u>

However, I need the orderBy filter to work in a controller. I'm doing this:

但是,我需要 orderBy 过滤器才能在控制器中工作。我这样做:

$scope.test = $filter('orderBy')($scope.segments, 'sequence');

Where, $scope.test should be my ordered array of objects based on the the sequence property. However, when I do console.log('$scope.test') an empty array ([]) shows. I imagine the $filter is not working in the controller.

其中, $scope.test 应该是我基于序列属性的有序对象数组。但是,当我执行 console.log('$scope.test') 时,会[]显示一个空数组 ( )。我想 $filter 在控制器中不起作用。

Any ideas on how to solve this? Thanks!

关于如何解决这个问题的任何想法?谢谢!

回答by SuperVeetz

I guess you just didn't inject the $filterservice in your controller properly, because this worked for me.

我猜你只是没有$filter正确地在你的控制器中注入服务,因为这对我有用。

<body ng-controller="MainCtrl">

  <ul ng-repeat="segment in segments | orderBy: 'sequence'">
    <li>{{segment.sequence}}</li>
  </ul>

  <script src="vendors/angular.min.js"></script>

  <script>
    angular.module('app', [])

    .controller('MainCtrl', ['$scope', '$filter', function($scope, $filter) {
      $scope.segments = [
      {
        "_id": "55d1167655745c8d3679cdb5",
        "job_id": "55d0a6feab0332116d74b253",
        "status": "available",
        "sequence": 1,
        "body_original": "Such a fork",
        "__v": 0,
        "body_translated": "Tal bifurcación"
      },
      {
        "_id": "55d1167655745c8d3679cdb4",
        "job_id": "55d0a6feab0332116d74b253",
        "status": "available",
        "sequence": 0,
        "body_original": "So this is it.",
        "__v": 0,
        "body_translated": "Así que esto es."
      }
    ];
      $scope.test = $filter('orderBy')($scope.segments, 'sequence');
      console.log($scope.test);
    }]);
  </script>

</body>

回答by tymeJV

You can always just sort the array (then you can even omit the orderByin the view - although you lose some of the magic with the bindings if anything is added):

你总是可以对数组进行排序(然后你甚至可以orderBy在视图中省略- 尽管如果添加了任何东西,你会失去一些绑定的魔力):

$scope.segments.sort(function(a, b) {
    return a.sequence - b.sequence;
});

回答by Rodrigo Galindez

As mentioned by tymeJV, the API call is async, and so the question is missing data to help answer it.

正如 tymeJV 所提到的,API 调用是异步的,所以问题是缺少数据来帮助回答它。