Question

我是angularjs的新手，并且正在使用书籍“pro-angularjs”中的代码示例来进行一些测试运行（它有一个项目的初始列表，但随后使用Ajax更新列表）：

<!DOCTYPE html>
<html ng-app="todoApp">
    <head>
        <title>TO DO List</title>
        <link href="bootstrap.css" rel="stylesheet" />
        <link href="bootstrap-theme.css" rel="stylesheet" />
        <script src="angular.js"></script>
        <script>
            var model = {
                user: "Adam",
                items: [{ action: "Buy Flowers", done: false },
                        { action: "Get Shoes", done: false },
                        { action: "Collect Tickets", done: true },
                        { action: "Call Joe", done: false }],
            };
            var todoApp = angular.module("todoApp", []);

            todoApp.run(function ($http) {
                $http.get("todo.json").then(function successCallback(data) {
                    model.items = data;
                });
            });

            todoApp.filter("checkedItems", function () {
                return function (items, showComplete) {
                    var resultArr = [];
                    angular.forEach(items, function (item) {
                        if (item.done == false || showComplete == true) {
                            resultArr.push(item);
                        }
                    });
                    return resultArr;
                }
            });

            todoApp.controller("ToDoCtrl", function ($scope) {
                $scope.todo = model;
                $scope.incompleteCount = function () {
                    var count = 0;
                    angular.forEach($scope.todo.items, function (item) {
                        if (!item.done) { count++ }
                    });
                    return count;
                }
                $scope.warningLevel = function () {
                    return $scope.incompleteCount() < 3 ? "label-success" : "label-warning";
                }
                $scope.addNewItem = function (actionText) {
                    $scope.todo.items.push({ action: actionText, done: false });
                }
            });
        </script>
    </head>
    <body ng-controller="ToDoCtrl">
        <div class="page-header">
            <h1>
                {{todo.user}}'s To Do List
                <span class="label label-default" ng-class="warningLevel()"
                      ng-hide="incompleteCount() == 0">
                    {{incompleteCount()}}
                </span>
            </h1>
        </div>
        <div class="panel">
            <div class="input-group">
                <input class="form-control" ng-model="actionText" />
                <span class="input-group-btn">
                    <button class="btn btn-default"
                            ng-click="addNewItem(actionText)">Add</button>
                </span>
            </div>
            <table class="table table-striped">
                <thead>
                    <tr>
                        <th>Description</th>
                        <th>Done</th>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat=
                        "item in todo.items | checkedItems:showComplete | orderBy:'action'">
                        <td>{{item.action}}</td>
                        <td><input type="checkbox" ng-model="item.done" /></td>
                    </tr>
                </tbody>
            </table>

            <div class="checkbox-inline">
                <label><input type="checkbox" ng_model="showComplete"> Show Complete</label>
            </div>
        </div>
    </body>
</html>

我做的唯一改变是：

        todoApp.run(function ($http) {
            $http.get("todo.json").then(function successCallback(data) {
                model.items = data;
            });
        });

最初是：

$http.get("todo.json").success(function (data) {
model.items = data;
});

不能与最新版本的angularjs一起运行，因此我进行了更改。

调试时，我发现model.items的初始值是：

并在UI中正确显示（请参见屏幕截图左侧）。

在ajax之后，其值更新为'data'，其值为：

数据的值对我来说很好（与项目的初始值相同）。

但是在我放开调试器之后，终于在UI中所有项目都消失了。

我明白为什么？似乎'items'与'data'相同。任何人都知道我如何进一步调试以找出根本原因？

谢谢，

不过，我使用的'todo.json'如下：

[{ "action": "Buy Flowers", "done": false },
{ "action": "Get Shoes", "done": false },
{ "action": "Collect Tickets", "done": true },
{ "action": "Call Joe", "done": false }]

Answer 1

您没有正确更新模型。从屏幕截图中可以看出，数据包含应分配给模型的对象数据。

todoApp.run(function ($http) {
    $http.get("todo.json").then(function successCallback(data) {
        model.items = data.data;
    });
});

为什么Ajax没有正确更新模型？

1 个答案: