角$ http.get

Question

我正在尝试显示所有列表以及与每个列表关联的任务。 在我的控制器中，我有：

$http.get('api/list/').success(function (data) {
            $scope.lists = data;
            $scope.tasks = data[0].Task;
        });

这适用于第一个项目，但当然适用于数据[0]。任务必须是动态的。 我遇到的问题是每个列表都被调用一次。 我尝试使用变量，但将其重置为原始值。 我也尝试过使用回调，但是没有运气。 我不确定自己正在忽略什么，或者我是否打算做错所有事情。

Answer 1

最好的选择是将http.get包装在工厂中，并使其返回包含任务的列表的new表示形式。 这样，您将获得新的引用，并且不会覆盖现有对象。 本质上，您希望http.get以其成功解决方案返回新的List对象。

在那之后，控制器将获得promise解析，获取新的列表对象，并将其绑定到范围内的东西上。 这将过滤到页面的其余部分，并让您在页面生命周期内保留现有的列表/任务。

Answer 2

如果每个列表都有一个任务，并且您想要它们的列表，则可以执行以下操作：

$scope.tasks = data.map(function(obj){return obj.task;})

map根据函数为每个列表返回的内容创建一个数组。

Answer 3

您的GET api/list/请求可能返回以下内容：

[
    {
        "id": 1,
        "name": "List #1",
        "tasks": [
            {
                "id": 1,
                "name": "Task #1 on List #1"
            },
            {
                "id": 2,
                "name": "Task #2 on List #1"
            },
            {
                "id": 3,
                "name": "Task #3 on List #1"
            }
        ]
    },
    {
        "id": 2,
        "name": "List #2",
        "tasks": [
            {
                "id": 1,
                "name": "Task #1 on List #2"
            },
            {
                "id": 2,
                "name": "Task #2 on List #2"
            },
            {
                "id": 3,
                "name": "Task #3 on List #2"
            }
        ]
    }
]

这是假设您始终要在api/list/命令中返回关联的任务。

然后，您只需在每次要刷新所有列表和所有任务时调用一次。

您应该有一个绑定到视图的控制器，在其中调用$ http.get。 它应该设置$scope.lists = data成功$scope.lists = data 。

在您看来，您只需要两个嵌套的ng-repeat标签。 例如，您可以使用无序列表：

<div ng-controller="ListsController">
    <ul>
        <li ng-repeat="list in lists">
            <ul>
                <li ng-repeat="task in list.tasks">

                </li>
            </ul>
        </li>
    </ul>
</div>

我还没有使用角度，但是我很确定这就是您需要做的。 单个AJAX调用将为每个列表填充一个<li>元素，并为属于该列表的每个任务填充嵌套的<li>元素。