与AngularJs实体订购微风导航收藏 [英] Ordering Breeze Navigation Collection on an Entity with AngularJs

查看:144
本文介绍了与AngularJs实体订购微风导航收藏的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

这是类似的不同而不同,排序微风导航属性的除了我真的不明白回答如果它不适用。我发布澄清。

我有一个名为复杂对象的 MasterTimeline


  • MasterTimeline

    • 哪位有集合 MasterPhases

      • 其中有 MasterMilestones集合。 (方不要里程碑也有任务与命令的集合)



下面是JSON

  [
  {
    $标识:1
    ID:6,
    名:新建筑
    MasterPhases:[
      {
        $标识:2
        ID:19,
        名称:第1阶段
        MasterTimelineId:6,
        订单:1,
        MasterMilestones:[
          {
            $标识:3
            ID:97,
            名:里程碑1
            MasterPhaseId:19,
            订单:1,
            MasterPhase:{
              $ REF:2
            }
          },
          {
            $标识:6,
            ID:98,
            名:里程碑2
            MasterPhaseId:19,
            订单:2,
            MasterPhase:{
              $ REF:2
            }
      },
      {
        $标识:11
        ID:20,
        名:第2阶段
        MasterTimelineId:6,
        订单:2,
        MasterMilestones:[
          {
            $标识:12,
            ID:99,
            名:里程碑1
            MasterPhaseId:20,
            订单:1,
            MasterPhase:{
              $ REF:11
            }
          },
          {
            $标识:17,
            ID:100,
            名:里程碑2
            MasterPhaseId:20,
            订单:3,
            MasterPhase:{
              $ REF:11
            }
          }
        MasterTimeline:{
          $ REF:1
        }
      }
    ]
  }
]

阶段和里程碑都有一个客户端配置Order属性,因为它们是一个时间轴的一部分,在期望的顺序进行设置。因此,这里的UI和模型重叠。

使用角度和微风我打通阶段的时间安排和循环。


  • NG-重复=的的在时间表

  • 然后每个阶段我遍历里程碑

    • NG-重复=的里程碑 里程碑


问题:
问题是我无法弄清楚如何订购根据他们的订单财产阶段或里程碑。这似乎只是随机的。即使在API中,我已经把所有关于这些对象的方法下订单。

我的尝试:
我所做的尝试是用微风让所有阶段基于时间轴上,然后为每个阶段取得的里程碑时,code似乎工作,但后来我渐渐的角度误差的URI太长,铬只想悬挂和有关URI的错误过长填补了控制台



添加一些code的要求:
注:这一切工作,除了我可以订购阶段或里程碑

网页API方法:

  [BreezeQueryable(MaxExpansionDepth = 4)]
    [HTTPGET]
    公众的IQueryable< MasterTimeline> MasterTimelines()
    {
        返回_contextProvider.QueryAll< MasterTimeline>();
    }    [BreezeQueryable(MaxExpansionDepth = 3)]
    [HTTPGET]
    公众的IQueryable< MasterMilestone> MasterMilestones()
    {
        返回_contextProvider.QueryAll&所述; MasterMilestone方式>()的OrderBy(X => x.MasterPhaseId).ThenBy(X => x.Order);
    }    [HTTPGET]
    公众的IQueryable< MasterMilestoneTask> MasterMilestoneTasks()
    {
        返回_contextProvider.QueryAll&所述; MasterMilestoneTask方式>()的OrderBy(X => x.MasterMilestoneId).ThenBy(X => x.Order);
    }    [HTTPGET]
    公众的IQueryable< MasterPhase> MasterPhases()
    {
        返回_contextProvider.QueryAll&所述; MasterPhase方式>()的OrderBy(X => x.Order);
    }

角MasterTimeline库有微风

 函数getTimelines(){
    变种时间表= {};
    返回EntityQuery.from(controllerMethodName)
                 .expand(masterPhases,masterPhases.masterMilestones,masterPhases.masterMilestones.masterMilestoneTasks)
                 //.orderBy(orderBy)
                 。采用(self.manager).execute()
                 。然后(querySucceeded,self._queryFailed);功能querySucceeded(数据){
                时限= data.results;
                返回的时间表;
            }
}

网页控制器在那里我列出时间表(意译)

  VAR VM =这一点;
    vm.timelines {}
 功能激活(){
            变种许诺= [getItems()];
            common.activateController(承诺,controllerId)
                。然后(函数(){
                    日志('激活时间线视图');
                });
        }功能getItems(forceRefresh){
            返回dc.mastertimeline.getTimelines()
                。然后(
                    功能(数据){
                        vm.timelines =数据;
                        返回的数据;
                    });
        };启用();

HTML页面上 - 我剥离下来,就像我所能

 <表>
                                <&TBODY GT;
                                    < TR数据-NG-重复=时间轴vm.timelines>
                                        &所述; TD> {{timeline.name}}&下; / TD>
                                        &所述; TD>
                                            <表>
                                                <&THEAD GT;
                                                    &所述; TR>
                                                        百分位列跨度=2>阶段(S)下; /第i
                                                    < / TR>
                                                < / THEAD>
                                                <&TBODY GT;
                                                    < TR数据-NG-重复=阶段vm.masterPhases>
                                                        < TD><强> {{phase.name}}(顺序:{{phase.order}})LT; / STRONG>< / TD>
                                                        &所述; TD>
                                                            <表>
                                                                <&THEAD GT;
                                                                    &所述; TR>
                                                                        百分位合并单元格=2>里程碑(S)LT; /第i
                                                                    < / TR>
                                                                < / THEAD>
                                                                <&TBODY GT;
                                                                    < TR数据-NG-重复=里程碑phase.masterMilestones>
                                                                        < TD> {{milestone.name}}(顺序:{{milestone.order}})LT; / TD>
                                                                        &所述; TD>                                                                        < / TD>
                                                                    < / TR>
                                                                < / TBODY>
                                                            < /表>
                                                        < / TD>
                                                    < / TR>
                                                < / TBODY>
                                            < /表>                                        < / TD>
                                    < / TR>
                                < / TBODY>
                            < /表>


解决方案

答案:

忽略下面,除非你不能使用此解决方案的一切,但如此简单的链接(塞尔达?)指出。

其他解决方案

尝试不同的方式天后确定。

研究发现,有效的解决方案。

短版,得到了数据微风回来后,我拔出子实体收藏到自己的JS数组,并对其进行排序。不知道为什么我不能只是做到这一点的对象本身,将使它容易得多。

 < TR数据-NG-重复=时间轴vm.timelines>

1平儿之前:

 < TR数据-NG-重复=阶段vm.timeline.masterPhases>功能getItems(forceRefresh){
                返回dc.mastertimeline.getTimelines()
                    。然后(
                        功能(数据){
                            vm.timelines =数据;
                            返回的数据;
                        });
            };

1平儿后:

 < TR数据-NG-重复=阶段vm.masterPhases>功能getItems(forceRefresh){
                返回dc.mastertimeline.getTimelines()
                    。然后(
                        功能(数据){
                            vm.timelines =数据;
                            vm.masterPhases = vm.timelines [0] .masterPhases;
                            vm.masterPhases.sort(功能(A,B){返回a.order - b.order;});
                            返回的数据;
                        });
            };

然后得到里程碑的子级

二级孩子之前:

 < TR数据-NG-重复=里程碑phase.masterMilestones>

二级孩子之后:

 < TR数据-NG-重复=里程碑vm.getMasterMilestones(phase.id)>功能getMasterMilestones(phaseId){
            VAR相= vm.masterPhases.filter(函数(OBJ){
                返回(obj.id === phaseId);
            });
            VAR里程碑=相位[0] .masterMilestones;
            返回milestones.sort(功能(A,B){返回a.order - b.order;});
        }

不知道这是最好的方式,但它的工作原理。将是很好,如果BreezeJs可以只允许孩子导航集合排序。


更新:更好的解决方案意识到我并不需要过滤,我可以发在孩子产权到函数

 < TR数据-NG-重复=时间轴vm.timelines>

第1级

 < TR数据-NG-重复=阶段vm.getMasterPhases(timeline.masterPhases)>功能getMasterPhases(相位){
            返回phases.sort(功能(A,B){返回a.order - b.order;});
        }

第二层

 < TR数据-NG-重复=里程碑vm.getMasterMilestones(phase.masterMilestones)>功能getMasterMilestones(里程碑){
            返回milestones.sort(功能(A,B){返回a.order - b.order;});
        }

This is vary similar, Sorting Breeze navigation properties except I don't really understand the answer if it does apply. I posted for clarification.

I have a complex object called MasterTimeline

  • MasterTimeline
    • -Which has a collection of MasterPhases
      • Which has a collection of MasterMilestones. (side not Milestones also have a collection of Tasks with an order)

Here is json

    [
  {
    "$id": "1",
    "Id": 6,
    "Name": "New Construction",
    "MasterPhases": [
      {
        "$id": "2",
        "Id": 19,
        "Name": "Phase 1",
        "MasterTimelineId": 6,
        "Order": 1,
        "MasterMilestones": [
          {
            "$id": "3",
            "Id": 97,
            "Name": "Milestone 1",
            "MasterPhaseId": 19,
            "Order": 1,
            "MasterPhase": {
              "$ref": "2"
            }
          },
          {
            "$id": "6",
            "Id": 98,
            "Name": "Milestone 2",
            "MasterPhaseId": 19,
            "Order": 2,
            "MasterPhase": {
              "$ref": "2"
            }
      },
      {
        "$id": "11",
        "Id": 20,
        "Name": "Phase 2",
        "MasterTimelineId": 6,
        "Order": 2,
        "MasterMilestones": [
          {
            "$id": "12",
            "Id": 99,
            "Name": "Milestone 1",
            "MasterPhaseId": 20,
            "Order": 1,
            "MasterPhase": {
              "$ref": "11"
            }
          },
          {
            "$id": "17",
            "Id": 100,
            "Name": "Milestone 2",
            "MasterPhaseId": 20,
            "Order": 3,
            "MasterPhase": {
              "$ref": "11"
            }
          }
        "MasterTimeline": {
          "$ref": "1"
        }
      }
    ]
  }
]

Phases and Milestones both have a client configured Order property as they are part of a timeline and have to be set in the desired order. So here UI and the model overlap.

Using angular and breeze I get the timeline and loop through the phases.

  • ng-repeat=phase in timeline.phases
  • Then for each phases I loop through the milestones
    • ng-repeat=milestone in phase.milestones

Problem: The problem is I can't figure out how to order the phases or the milestones based on their order property. It seems just random. Even though in the API I've put an order on all the methods regarding these objects.

What I tried: What I did try was to use Breeze to get all Phases based on the timeline, then for each phase get the milestones, the code seemed to work but then I was getting angular errors that the uri was too long and chrome would just hang and fill the console up with errors about uri being too long.


Adding some Code as Requested: Note: All this works except I can order the Phases or Milestones

Web API Methods:

[BreezeQueryable(MaxExpansionDepth = 4)]
    [HttpGet]
    public IQueryable<MasterTimeline> MasterTimelines()
    {
        return _contextProvider.QueryAll<MasterTimeline>();
    }

    [BreezeQueryable(MaxExpansionDepth = 3)]
    [HttpGet]
    public IQueryable<MasterMilestone> MasterMilestones()
    {
        return _contextProvider.QueryAll<MasterMilestone>().OrderBy(x => x.MasterPhaseId).ThenBy(x => x.Order);
    }

    [HttpGet]
    public IQueryable<MasterMilestoneTask> MasterMilestoneTasks()
    {
        return _contextProvider.QueryAll<MasterMilestoneTask>().OrderBy(x => x.MasterMilestoneId).ThenBy(x => x.Order);
    }

    [HttpGet]
    public IQueryable<MasterPhase> MasterPhases()
    {
        return _contextProvider.QueryAll<MasterPhase>().OrderBy(x => x.Order);
    }

Angular MasterTimeline Repository with Breeze

function getTimelines() {
    var timelines = {};
    return EntityQuery.from(controllerMethodName)
                 .expand("masterPhases, masterPhases.masterMilestones, masterPhases.masterMilestones.masterMilestoneTasks")
                 //.orderBy(orderBy)
                 .using(self.manager).execute()
                 .then(querySucceeded, self._queryFailed);

function querySucceeded(data) {
                timelines = data.results;
                return timelines;
            }
}

Page Controller where I list Timelines (paraphrased)

    var vm = this;
    vm.timelines {}


 function activate() {
            var promises = [getItems()];
            common.activateController(promises, controllerId)
                .then(function () {
                    log('Activated Timeline View');
                });
        }

function getItems(forceRefresh) {
            return dc.mastertimeline.getTimelines()
                .then(
                    function (data) {
                        vm.timelines = data;
                        return data;
                    });
        };

activate();

Html on Page - I stripped it down as much as I could

<table>
                                <tbody>
                                    <tr data-ng-repeat="timeline in vm.timelines">
                                        <td>{{timeline.name}}</td>
                                        <td>
                                            <table>
                                                <thead>
                                                    <tr>
                                                        <th colspan="2">Phase(s)</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <tr data-ng-repeat="phase in vm.masterPhases">
                                                        <td><strong>{{phase.name}} (Order: {{phase.order}})</strong></td>
                                                        <td>
                                                            <table>
                                                                <thead>
                                                                    <tr>
                                                                        <th colspan="2">Milestone(s)</th>
                                                                    </tr>
                                                                </thead>
                                                                <tbody>
                                                                    <tr data-ng-repeat="milestone in phase.masterMilestones">
                                                                        <td>{{milestone.name}} (Order: {{milestone.order}})</td>
                                                                        <td>

                                                                        </td>
                                                                    </tr>
                                                                </tbody>
                                                            </table>
                                                        </td>
                                                    </tr>
                                                </tbody>
                                            </table>

                                        </td>
                                    </tr>
                                </tbody>
                            </table>

解决方案

The Answer:

Ignore everything below unless you can't use this solution, but was so simple as link (Zelda?) pointed out.

Other Solutions

Ok after days of trying different ways.

Found a solution that works.

Short version, after getting the data back from Breeze I pull out the child entity collections into their own js array and sort them. No idea why I can't just do this in the object itself, would make it so much easier.

<tr data-ng-repeat="timeline in vm.timelines">

1st Level Children Before:

    <tr data-ng-repeat="phase in vm.timeline.masterPhases">

function getItems(forceRefresh) {
                return dc.mastertimeline.getTimelines()
                    .then(
                        function (data) {
                            vm.timelines = data;
                            return data;
                        });
            };

1st Level Children After:

<tr data-ng-repeat="phase in vm.masterPhases">

function getItems(forceRefresh) {
                return dc.mastertimeline.getTimelines()
                    .then(
                        function (data) {
                            vm.timelines = data;
                            vm.masterPhases = vm.timelines[0].masterPhases;
                            vm.masterPhases.sort(function (a, b) { return a.order - b.order; });
                            return data;
                        });
            };

Then to get the sub-level of Milestones

2nd Level Children Before:

<tr data-ng-repeat="milestone in phase.masterMilestones">

2nd Level Children After:

<tr data-ng-repeat="milestone in vm.getMasterMilestones(phase.id)">

function getMasterMilestones(phaseId) {
            var phase = vm.masterPhases.filter(function(obj) {
                return (obj.id === phaseId);
            });
            var milestones = phase[0].masterMilestones;
            return milestones.sort(function(a, b) { return a.order - b.order; });
        }

Not sure if this is the best way but it works. Would be nice if BreezeJs could just allow sorting on the children navigation collections.


UPDATE: Even better solution Realized I didn't need to filter, I can just send in the child property right into the function.

<tr data-ng-repeat="timeline in vm.timelines">

1st Level

 <tr data-ng-repeat="phase in vm.getMasterPhases(timeline.masterPhases)">

function getMasterPhases(phases) {
            return phases.sort(function (a, b) { return a.order - b.order; });
        }

2nd Level

<tr data-ng-repeat="milestone in vm.getMasterMilestones(phase.masterMilestones)">

function getMasterMilestones(milestones) {
            return milestones.sort(function(a, b) { return a.order - b.order; });
        }

这篇关于与AngularJs实体订购微风导航收藏的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆