javascript - 角 $http.get

Question

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

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

这适用于第一项，但当然 data[0].Task 需要是动态的。我遇到的问题是每个列表都调用一次。我尝试使用变量，但它被重置为原始值。我也尝试过使用回调，但没有运气。我不确定我忽略了什么，或者我是否做错了。

Answer 1

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

之后，控制器获得承诺解决方案，获取新的列表对象，并将其绑定到范围内的某个对象中。这将过滤到页面的其余部分，并让您在页面的生命周期内保留现有的列表/任务。

Answer 2

您的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成功。

在您看来，您只需要两个嵌套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>

Answer 3

如果每个列表都有一个任务并且你想要一个它们的列表，你可以这样做：

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

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