Angular $ 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解析，获取新的list对象，并将其绑定到范围内的某些内容。这将过滤到页面的其余部分，并允许您保留页面生命周期中的现有列表/任务。

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。

在您的视图中，您只需要两个嵌套的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>元素。