当前位置: 首页 > 面试题库 >

在ng-repeat中使用orderBy定制订单

劳和雅
2023-03-14
问题内容

我有这样的对象:

students = {name: 'Aa_Student', class: 'A_Class'},
           {name: 'Ab_Student', class: 'A_Class'},
           {name: 'Ac_Student', class: 'B_Class'},
           {name: 'Ba_Student', class: 'B_Class'},
           {name: 'Bb_Student', class: 'C_Class'},
           {name: 'Bc_Student', class: 'C_Class'}

假设学生对象被改组。我使用ng-repeat来显示数据。我想按自定义顺序对对象进行排序。

例如,我想显示如下数据:

  Name              Class
-----------------------------
Ac_Student         B_Class
Ba_Student         B_Class
Aa_Student         A_Class
Ab_Student         A_Class
Bb_Student         C_Class
Bc_Student         C_Class

所以基本上,我想按学生的班级排序,但是首先是B_Class,然后是A_Class,然后是C_Class。另外,我想按学生姓名的字母顺序排序。我怎样才能做到这一点?

HTML:

<table>
    <tr ng-repeat="student in students | orderBy:customOrder">
    ...
    </tr>
</table>

控制器:

$scope.customOrder = function(student) {
    $scope.students = $filter('orderBy')(student, function() {

    });
};

问题答案:

嗨,您可以创建自定义排序过滤器,请参见此处http://jsbin.com/lizesuli/1/edit

的HTML:

  <p ng-repeat="s in students |customSorter:'class'">{{s.name}} - {{s.class}} </p>
      </div>

angularjs过滤器:

app.filter('customSorter', function() {

  function CustomOrder(item) {
    switch(item) {
      case 'A_Class':
        return 2;

      case 'B_Class':
        return 1;

      case 'C_Class':
        return 3;
    }  
  }

  return function(items, field) {
    var filtered = [];
    angular.forEach(items, function(item) {
      filtered.push(item);
    });
    filtered.sort(function (a, b) {    
      return (CustomOrder(a.class) > CustomOrder(b.class) ? 1 : -1);
    });
    return filtered;
  };
});


 类似资料:
  • 问题内容: 我正在尝试将ng-repeat与字典样式语法一起使用,并对键值应用顺序。 看来OrderBy无法正常工作 此处的示例 http://jsfiddle.net/mhXuW/ 问题答案: orderBy的参数必须与对象数组中的属性名称匹配。 您的数据需要看起来像这样: 然后这样的过滤器将起作用: 小提琴。 请注意,orderBy适用于整个数组(在上面的示例代码中),并且它返回一个排序后的数

  • 问题内容: 我正在开发一个页面,我需要在其中显示一些框(使用),其中包含频道信息以及显示位置(城市)。 我面临的问题是当我重复第二遍时: 这应该获得第一个ng-repeat的$ index值,并使用显示频道的位置创建一个新数组。它确实做到了。但是,当我使用此数组应用第二个ng- repeat时,它无法正常工作。 说我的html看起来像这样(PS:我需要使用索引值而不是因为我将这些框放到列中) JS

  • 问题内容: 我如何获得Angular的指令以按每个项目的实际值而不是按每个项目的属性值对列表进行排序? 例如: 这是一个玩弄的小提琴:http : //jsbin.com/okatur/1/edit 我意识到我可以在阵列上做,但这是我唯一的选择吗? 问题答案: 从1.3.0-rc.5开始 从AngularJS 1.3.0-rc.5开始 ,如果未提供其他参数,则过滤器(请参阅文档)将使用其项目自动对

  • 问题内容: 我正在尝试将AngularJS用于我的第一个项目(锦标赛经理),并且筛选器不起作用:(我已阅读了有关该文档的所有文档,但无济于事:/ 所以,我在上面定义了vars : 现在,在我看来,我正在尝试重新排序(首先只有一个订单项),但是再也无法工作… 第二次,我要重新排序,从2条信息:和如果第一是平等的。我尝试更换这样的,但如果一个代码没有工作,他绝不会与2工作… 谢谢大家的阅读,对于帖子的

  • 问题内容: 我有这个代码。 http://jsfiddle.net/0tgL7u6e/ JavaScript 视图 我不知道为什么订单不起作用,为什么过滤器不起作用。 在另一个问题上,我读到一些关于对象无法过滤或排序的信息。但是我上面有一个对象数组。此外,它应该工作! 有什么问题? 问题答案: 要对过滤器使用跟踪,必须在过滤器后面添加按表达式跟踪。 这是工作

  • 问题内容: 我已经用orderBy尝试了许多ng-repeat的示例,但是无法使json与它一起工作。 还有JSON 我写什么都没关系,我总是得到相同的顺序,或者我可能说根本没有顺序。 问题答案: 该只适用于阵列-见http://docs.angularjs.org/api/ng.filter:orderBy 也是一个很好的过滤器,用于ng-repeat上的对象而不是数组@ [AngularjsO