javascript - AngularJs ng-repeat of objects orderBy object-id in array

标签 javascript angularjs filter angularjs-ng-repeat

我想通过他的特定对象“id”对对象的 ng-repeat 的结果进行排序。这个订单在一个数组中,所以我制作了这个自定义过滤器 ng-repeat="line in dataObject|objectIdFilter:orderByArray":

.filter('objectIdFilter', [function() {
    return function(inputObjet, orderArray) {
        var result = [];
        angular.forEach(orderArray, function(value) {
          result.push(inputObjet[value]);
        });
        console.log(result);
        return result;
    }
}])

这是一个示例基本 Controller ,其中包含数组中的对象和订单 ID:

.controller('MainCtrl', ['$scope', function($scope) {

  $scope.dataObject = {
    1: {username:'user1'},
    10: {username:'user10'},
    20: {username:'user20'},
    500: {username:'user500'}
  };

  $scope.orderByArray = [20,10,1,500];

}])

用他的 HTML:

<div ng-app="myApp">
  <div ng-controller="MainCtrl">
      <div ng-repeat="line in dataObject|objectIdFilter:orderByArray">{{line.username}}</div>
  </div>
</div>

Jsfiddle:https://jsfiddle.net/infnadanada/tLrx4uro/

所以...

  • 一切正常但我不知道是否有另一种方法可以像我一样在不使用自定义过滤器的情况下订购 ng-repeat。

  • 另外,如果您转到浏览器控制台中的 Jsfiddle,您会看到我的自定义过滤器返回的结果是结果的 2 倍,我不知道为什么。

PD:英语不是我的第一语言 :D

谢谢

最佳答案

可能还有另一种好方法,但您可以在不使用过滤器的情况下在 Controller 中过滤数据。通过使用它,您可以防止 Angular 调用过滤器两次。

$scope.dataObject = {
    1: {username:'user1'},
    10: {username:'user10'},
    20: {username:'user20'},
    500: {username:'user500'}
  };
  $scope.orderByArray = [20,10,1,500];
   $scope.result = [];
  angular.forEach($scope.orderByArray, function(value) {
      $scope.result.push($scope.dataObject[value]);
  });
}]);

模板内部

<div ng-app="myApp">
  <div ng-controller="MainCtrl">
      <div ng-repeat="line in result">{{line.username}}</div>
  </div>
</div>

关于javascript - AngularJs ng-repeat of objects orderBy object-id in array,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32434544/

相关文章:

javascript - 弹跳球 5 次 jquery/javascript 初学者水平

php - 使用 Angular 对 json 执行 CRUD 操作。?

javascript - 表格和条件 tr 中的 ng-repeat

javascript - 如何将一个数组拆分为两个具有交替元素的数组

javascript - 如何制作整页的JS和CSS菜单

javascript - 类型 'Observable<Response> ' 不可分配给类型 'Observable<HttpResponse<Blob>>'

Excel映射并创建一个新列

javascript - 如何在 SuiteScript 2.0 版本中使用 NVAL2 函数使用过滤条件作为公式日期字段创建搜索

javascript - addEventListener 与 onClick 属性的缺点

javascript - 在 Angular 中切换一个 div