【发布时间】：2015-08-12 04:46:19
【问题描述】：
我对 Web 开发比较陌生，我正在努力更好地了解服务器和数据库以及客户端开发的局限性。
现在，我正在学习 AngularJS，并且已经能够创建简单的 CRUD 应用程序，例如待办事项列表或在线商店。目前，我一直在通过常规的 JavaScript 数组/对象为我的 Web 应用程序创建数据。但现在我希望能够通过我自己的 CMS 用户界面永久编辑/更改这些数据。
一些研究使我使用JSON 和角度$http 服务从服务器请求JSON 数据。
现在，我正在尝试使用 angularJS 异步更新此 JSON 数据，但我不确定如何执行此操作（请参阅下面的尝试）。
简单的待办事项列表应用程序
<body ng-controller="ToDoCtrl">
<div class="container">
<div class="page-header">
<h1>
{{todo.user}}'s To Do List
<span class="label label-default" ng-hide="incompleteCount() == 0"
ng-class="warningLevel()">
{{ 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-success" ng-click="addItem(actionText, todo.items)">Add</button>
</span>
</div><!-- end input-group -->
<table class="table table-striped">
<thead>
<tr>
<th>Descriptions</th>
<th>Done</th>
<th>Remove</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>
<td><button ng-click="deleteItem(item, todo.items)" class="btn btn-danger">Delete</button></td>
</tr>
</tbody>
</table>
<div class="checkbox-inline">
<label><input type="checkbox" ng-model="showComplete">Show Complete</label>
</div>
<div class="input-group">
<button ng-click="save()" class="btn btn-primary">Save Changes</button>
<p>{{msg}}</p>
</div>
</div><!-- end panel -->
</div>
<!-- Vendor JS -->
<!-- Angular -->
<script src="vendors/angular.min.js"></script>
<!-- Modules -->
<script src="app.js"></script>
</body>
app.js
var model = {
user: "Alex"
};
angular.module('todoApp', [])
.run(function($http) {
$http.get("todo.json").success(function(data) {
model.items = data;
});
})
.controller('ToDoCtrl', ['$scope', '$http', function($scope, $http) {
$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.addItem = function(actionText, sourceArray) {
sourceArray.push(
{
action: actionText,
done: false,
}
);
$scope.actionText = '';
};
$scope.deleteItem = function(item, sourceArray) {
for(var i = 0, j = sourceArray.length; i < j; i++) {
if(item.action == sourceArray[i].action) {
sourceArray.splice(i, 1);
return;
}
}
};
$scope.save = function() {
$http.post('C:\Users\Alex\Desktop\Development\"Web Design"\2015\todoApp\public\src\todo.json', $scope.todo.items).then(function(data) {
$scope.msg = 'Data saved '+ JSON.stringify($scope.todo.items);
});
};
}])
.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;
}
});
我将这个Post 用于$scope.save 函数，但我收到一个错误：“XMLHttpRequest 无法加载。跨源请求仅支持协议方案：http、data、chrome...”
$scope.save = function() {
$http.post('C:\Users\Alex\Desktop\Development\"Web Design"\2015\todoApp\public\src\todo.json', $scope.todo.items).then(function(data) {
$scope.msg = 'Data saved '+ JSON.stringify($scope.todo.items);
});
};
基本上，我只想用我的$scope.todo.items 数组的当前内容更新我的todo.json 文件。我认为最简单的方法是删除JSON数据的当前内容并替换为$scope.todo.items的当前内容，但我对这些东西了解不多。
感谢您的帮助。
【问题讨论】：
-
您不能只发布到您的文件系统。您需要一个 http 服务器和服务器端应用程序。试试node.js
-
嗯，好的。我也在玩 Node.js，我能够启动我自己的本地服务器，但每次我对我的应用程序进行更改时，我都必须刷新服务器。我可以只用 Node.js 更新
todo.json吗？ -
是的，但是您需要发布到
http://localhost:3000/之类的内容，或者您有节点设置来处理您的请求的任何内容。你不能像你的例子那样只发帖到c:\some\path。 -
我会试试这个。谢谢！
标签： javascript json angularjs