繁体   English   中英

AngularJs ng重复对象orderBy通过数组中的object-id

[英]AngularJs ng-repeat of objects orderBy object-id in array

我想通过对象的特定对象“ id”对对象进行ng-repeat的结果排序。 此顺序在数组中,因此我ng-repeat="line in dataObject|objectIdFilter:orderByArray"了此自定义过滤器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;
    }
}])

这是一个基本控制器的示例,其中的对象和订单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

谢谢

可能还有另一种好方法,但是您可以在不使用过滤器的情况下在控制器内部过滤数据。 通过使用此功能,您可以防止两次调用过滤器。

$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>

其他方式:您可以遍历maphttps : //jsfiddle.net/sherali/tLrx4uro/2/

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

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM