-1
私はangularjsに新しいですし、（それがリストを更新するためのAjaxを使用し、その後の項目の最初のリストを持っていますが、）いくつかのテスト実行を行うために書籍「プロ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;
});
});
は、それは最初だった：latetestバージョンangularjsで実行し、私は変更を加えていない
$http.get("todo.json").success(function (data) {
model.items = data;
});
。 （スクリーンの左側を参照）
とそれが正しくUIに表示されている：
デバッグ、iはmodel.itemsの初期値であることを見出しました。データの値は、（項目の初期値と同じ）私には正常に見える
：
はアヤックスた後、その値は、その値である「データ」に更新されます。
私はデバッガを手放した後、最終的に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 }]
ありがとうございます。私はデータの中のデータを見て、二度考えなかった。著者のオリジナルコードはどうやって動作するのですか？ – user1559625
@ user1559625あなたは大歓迎です:) – Vivz