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

ng-repeat上的Angularjs OrderBy不起作用

冷英光
2023-03-14
问题内容

我正在尝试将AngularJS用于我的第一个项目(锦标赛经理),并且orderBy筛选器ng- repeat不起作用:(我已阅读了有关该文档的所有文档,但无济于事:/

所以,我在上面定义了vars $scope

$scope.order_item = "count_win";
$scope.order_reverse = false;
$scope.teams = {
  100 : {
    id: 100,
    name: "XXX",
    count_win: 1,
    count_loose: 2,
    goal_average: 1,
  },
  200 : {
    id: 200,
    name: "XXX",
    count_win: 1,
    count_loose: 2,
    goal_average: 1,
  },
  [...]
};

现在,在我看来,我正在尝试重新排序(首先只有一个订单项),但是再也无法工作…

<tr ng-repeat="team in teams | orderBy:order_item:order_reverse">
   <td>{{team.name}}</td>
   <td>{{team.count_loose}}</td>
   <td>{{team.goal_average}}</td>
</tr>

第二次,我要重新排序,从2条信息:count_wingoal_average如果第一是平等的。我尝试更换$scope.order_item这样的,但如果一个代码没有工作,他绝不会与2工作…

$scope.order_item = ['count_win','goal_average'];

谢谢大家的阅读,对于帖子的大小感到抱歉。


问题答案:

$scope.teams不是数组(它是对象的对象),并且orderBy过滤器仅适用于数组。如果创建$scope.teams数组,它将起作用:

$scope.teams = [
    {
      id: 100,
      name: "team1",
      count_win: 3,
      count_loose: 2,
      goal_average: 2,
    },
    {
      id: 200,
      name: "team2",
      count_win: 3,
      count_loose: 2,
      goal_average: 1,
    },        
    {
      id: 300,
      name: "team3",
      count_win: 1,
      count_loose: 2,
      goal_average: 1,
     }
];

或者,您可以添加一个适用于对象的特殊过滤器,如下所示(从此处借用):

app.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;
  };
});

并像这样使用它:

<tr ng-repeat="team in teams | orderObjectBy:order_item:order_reverse">

请注意,此自定义过滤器将不适用于问题第二部分中的排序顺序数组。



 类似资料:
  • 问题内容: 我有一张桌子,其中的行通过重复。我正在尝试创建一个模板,为每一行生成列 问题是我的自定义td模板根本没有呈现。在这里,我打算用n个s 代替- 这将根据我的数据对象上的属性数量来确定,但是目前,我只是试图获得一个简单的指令,该指令将输出两列。 MYPLUNKER:显示此问题的一个实例和指令代码。 问题答案: 如注释中所指出,指令模板应具有单个根元素。因此,我建议您将元素移动到指令的模板,

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

  • 我有一个简单的循环与像这样: 控制器。 据我所知,Angular将首先呈现视图,并用数字替换插值的,然后,在单击事件中,将计算字符串。 在这种情况下,完全获得预期效果,即:

  • 问题内容: 我有一个像这样的简单循环: 控制器中有一个功能。 据我所知,Angular将首先渲染视图并用数字替换插值,然后在单击事件时将评估字符串。 在这种情况下,完全可以得到预期的结果,即:但是……它什么也没做。 当然,我可以编写代码以从数组甚至DOM中获取代码,但这似乎不像Angular那样。 那么,如何在循环内向指令添加动态内容呢? 问题答案: 代替 做这个: 请看这个小提琴: http:/

  • 问题内容: 我试图了解over 的意义。角度文档提供了以下示例 但是,使用, 有人可以解释。的意义吗?谢谢。 问题答案: 这两个指令的含义相似:它们重复HTML标记。所不同的只是,在您的帮助下,您可以重复几个标签,从标签开始于,再到完成于。 例如,您有下一个代码: 因此,现在我们可以为这些代码添加2个指令。 与: 与和: 因此,现在您可以看到,在第一种情况下,仅使用指令重复,但是在第二种情况下,您

  • 问题内容: 我对AngularJs和数据表很陌生。我需要使用ng- repeat填充表行中的数据。我能够填充行并首次启用排序。当我单击箭头以升序或降序排序时,行数据消失了。 这是我的表数据 这是我的排序javascript代码 我得到tr的行数是1 我在页面底部包含了js文件 当我加载数据时,用ng-repeat进行精细加载。但是,当我单击标题以升序或降序排序时,行被擦除了。 请告诉我我做错了什么