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

角度orderBy对象可能吗?

罗波鸿
2023-03-14
问题内容

我有一个表示日历日期的JSON对象。这些是通过CMS添加的,我希望能够根据日期对其进行过滤。我的架构设置使这比我想象的要困难得多。是否可以在此JSON对象中按天值订购或是否存在过滤器解决方法?

这是我的JSON对象:

{
"_id" : ObjectId("53f252537d343a9ad862866c"),
"year" : {
    "December" : [],
    "November" : [],
    "October" : [],
    "September" : [],
    "August" : [],
    "July" : [ 
        {
            "day" : "21",
            "title" : "Event Title",
            "summary" : "Event Summary",
            "description" : "oEvent Description",
            "_id" : ObjectId("53f252537d343a9ad862866d")
        }
    ],
    "June" : [],
    "May" : [],
    "April" : [],
    "March" : [],
    "February" : [],
    "January" : []
},
"__v" : 0
}

这是我的视图,该视图已经使用自定义过滤器按月过滤。orderBy无法正常运行,但我将其保留为占位符以显示我要在何处设置功能。

<div class="calDynamic" data-ng-repeat="n in [] | range:100">
<div ng-repeat="cal in calendar[n].year | filterKey:month">
  <div ng-if="cal != '' ">
    <div class="calendar">


    <div ng-repeat="item in cal | orderBy: 'key.day' ">

        <a href="/events/{{item.day}}">
          <article class="eventslist">
           <div class="numberedDate">
               <h3>{{item.day}}</h3>
            </div>
            <div class="calInfo">
               <h5>{{item.title}}</h5>
               <p>{{item.summary}}&nbsp;<a>more</a></p>
            </div>
           </article>


      </div><!-- ng-repeat val,key -->
</div><!-- calendar -->
</div><!-- ng-if cal -->
</div><!-- ng-repeat cal -->
</div><!-- calDynamic -->

问题答案:

您应该能够定义一个自定义排序功能,该功能可以按对象中的任何项目进行排序。关键是要在过滤器函数中将对象转换为数组。

这是一个例子:

app.filter('orderByDayNumber', 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;
  };
});

然后,您可以这样称呼它:

<div ng-repeat="(key, val) in cal | orderByDayNumber: 'day' ">

请注意,您不应该那样写val.day

在此处查看此出色的博客文章以获取更多信息。

编辑 :实际上,看起来您的结构实际上已经是一个数组,因此,尽管此技术仍将起作用,但可能没有必要-
可能这只是您将参数添加到orderBy的方式而引起了问题。



 类似资料:
  • 问题内容: 我想知道是否需要避免在创建一个带有嵌入式对象数组的简单对象时复制对对象的引用。情况如下:我有一个接受JSON并应用一些逻辑然后将对象存储在其中的服务器D B。可以说,我的表单用于保存DB中的团队。服务器接受team作为json。团队有一个TeamMember对象数组,我的表单有一个简单的字段来输入团队成员信息并将其添加到团队teamMembers数组中。现在这是一个问题,当我向数组列表

  • 返回按属性(props)和顺序(orders)排序的对象数组。 在默认值为 0 的 props 数组上使用 Array.sort(),Array.reduce(),根据传递的顺序使用数组解构来交换属性位置。 如果没有传递 orders 数组,那么默认情况下它会按 'asc' 排序(升序) 。 const orderBy = (arr, props, orders) => [...arr].so

  • 我试图显示一个对象数组,多个函数将不得不改变它。所以我试着让它成为可观察的(也许我错了)。 打字版本:2.7.2 rxjs:6.2.1角cli:6.0.8节点:8.11.3角:6.0.7 我的服务(IsolementService)中有一个变量声明为: 我的服务主要有两种方法 接口: 我的服务是呼叫组件: 但是当我编译时,我有一个错误TS2495:类型“Observable”不是数组或字符串类型。

  • 问题内容: 我需要建立一个对话框来与项目列表中的任何项目一起使用。该对话框与项目无关,几乎相同,只是字段的值显然与项目相关。 我正在构建的指令正在从文件中读取模板,使用$ compile对其进行编译,然后将其绑定(链接)到该项目的范围。绑定的结果是一棵DOM树。为了使对话框可见,我需要将此树附加到现有DOM中的某些元素上。对话框的性质使得将其直接附加到body标签是有意义的。该对话框将与列表中的不

  • 我有一个组件订阅服务中的一个可观察对象。该方法反过来订阅另一个服务中的可观察对象。我想将一个数组从最后一个服务传递回第一个服务,然后第一个服务将该数组传递回组件。更具体地说,该组件调用其本地服务,然后调用一个数据服务,该数据服务通过http客户端访问我的数据库。http客户端正在工作,数据服务将数组返回给本地服务。本地服务接收数组,但我不知道如何将该数组作为可观察对象传递回组件。以下是简短的代码块

  • 问题内容: 当我按ASC排序时,我需要记录顶部带有空值的记录 一些足球运动员没有球队,所以和,我需要将他们排在首位 我想重写排序函数,但是我需要保存谓词 问题答案: 您可以在控制器中使用以下内容: 在HTML上: 这样,您可以单独维护谓词。只需在orderBy表达式中连接该函数即可首先运行它。 柱塞