javascript - Ng-Repeat 中的 Angular 评估函数

Question

我想不出一个很好的方法来解决这个问题，但本质上我想知道在 Ng-Repeat 中评估表达式的最佳解决方案是什么。例如，如果我有一些看起来像这样列出我的项目的代码(假设我有一个带有 ng-click 的表单，该表单与一个将内容添加到项目数组的函数相关联，并且每个项目都有一个关联的里程碑数组)。

<h2>List of Projects!</h2>
<ul>
    <li ng-repeat="project in projects">
        <p>{{project.name}}</p>
        <li ng-repeat="milestone in project.milestones">
            <p>{{milestone.name}}</p>
            <p>{{milestone.dateAccomplished}}</p>
        </li>
    </li>
<ul>

现在这就是我的问题所在。由于每个里程碑都有一个与之关联的 dateAccomplished，因此我想创建另一个列表，按时间顺序打印所有项目的所有里程碑及其关联的项目和日期。我的想法是遍历所有项目，获取所有里程碑，并按 dateAccomplished 使用 Angular 过滤器(我认为这可行)，但在这种情况下我可以在哪里利用 ng-repeat ？

本质上，我知道如何在纸上解决这个问题，但我不知道如何以 Angular 的方式解决它。我无法找到一种方法来循环我的项目(使用 ng-repeat)而不创建我不想处理的额外 HTML。是我想太多了吗？我是否应该在 ng-repeat 参数中调用一个为我做一些工作的函数，例如

<li ng-repeat="milestone in getAllMilestones()">

感谢您的帮助。

编辑:项目的 JSON 对象如下所示:

project = {
    name: "some string",
    milestones: [{
        title: "some string",
        date: Date.now()
    ]}
}

编辑2:JS-Fiddle:http://jsfiddle.net/HB7LU/1672/

注意:由于imcg的评论， fiddle 正在按照我想要的方式工作；然而，Nahn 的回答似乎表明我应该使用一项服务并注入(inject)该服务，所以也许我还没有完全做到这一点。

Answer 1

将 ng-repeat 绑定(bind)到 allMilestones() 的其他解决方案确实有效，但您必须记住，每次出现 $digest 循环时都会对 ng-repeat 中的表达式进行求值，这可能随时发生模型变化。如果您评估 JSFiddle 的当前版本，您会注意到，对于您在“项目名称”输入字段中键入的每个字母，都会多次调用 allMilestones() 函数。这本身并没有那么糟糕，但该函数具有嵌套循环 - 如果您开始拥有大量项目/里程碑，这最终可能会导致性能问题。

即使所有这些都是可以接受的，更简洁的解决方案是将您的逻辑封装到服务中，并让该服务为您维护所有里程碑的列表。这使您的服务和 Controller 非常易于测试和维护。

参见 fiddle http://jsfiddle.net/HB7LU/1676/

代码是

myApp.service('ProjSvc', function () {
    var projects = [];
    var milestones = [];
    return {
        createProject: function (projectName) {
            var proj = {
                name: projectName,
                milestones: [{
                    title: "started project",
                    dateCreated: Date.now()
                }]
            };
            projects.push(proj);
            milestones.push(proj.milestones[0]);

        },
        projects: projects,
        allMilestones: milestones
    };
});

function MyCtrl($scope, ProjSvc) {

    $scope.currentProjects = ProjSvc.projects;
    $scope.allMilestones = ProjSvc.allMilestones;

    $scope.createProject = function () {
        ProjSvc.createProject($scope.newProjectName);
        $scope.newProjectName = "";
    };
}

您需要针对 ProjSvc 和 MyCtrl 设置单元测试，以捕获维护除所有项目之外的所有里程碑列表的要求。

在更强大的版本中，您可能希望向里程碑添加一些字段，以便可以跟踪关系(即，milestone.projId)。