从 ngModel 更新 JSON 元素然后 http POST答案

【问题标题】：Update JSON element from ngModel then http POST从 ngModel 更新 JSON 元素然后 http POST
【发布时间】：2016-01-14 02:01:11
【问题描述】：

好的，我对 Angular 还很陌生，但我被卡住了，这可能是一个相当简单的解决方案。

我有一个非常基本的 Angular 应用程序，其中有一个“页面视图/控制器”和一个“管理视图/控制器”，它们使用相同的 JSON 文件来填充数据。

显然我想在管理视图中对某些元素进行 CRUD，我的意思是，修改我的 JSON 文件。

这是我的一段 JSON 文件

  {
  "id": 22,
  "title": "",
  "section": "expositions",
  "text": "2005 : « Ce soir la lune reve » (Casa de Francia et IFAL - Mexico DF)",
  "url": "",
  "fr": "",
  "es": "",
  "en": "",
  "active": false
  },
  {
  "id": 23,
  "title": "",
  "section": "expositions",
  "text": "2006 : « Ce monde rayonnant » (Espace Triangle - Bruxelles, Belgique)",
  "url": "",
  "fr": "",
  "es": "",
  "en": "",
  "active": false
  }

所有这些元素都在我的控制器范围内

$http.get('http://example.com/js/texts.json').then(function (result){
   $scope.texts = result.data;
});

一切正常，我可以使用 ngModel 填充我的视图。

<ul class="angular-content">
   <li ng-repeat="expo in texts | filter:{section: 'expositions'}">
    <h4>
      <input type="checkbox" ng-model="expo.active">
      <textarea rows="2" cols="124" ng-model="expo.text"></textarea>
    </h4>
    <h4 ng-show="expo.fr"><a target="_blank" href="{{expo.fr}}">FR</a></h4>
    <h4 ng-show="expo.es"><a target="_blank" href="{{expo.es}}">ESP</a></h4>
    <h4 ng-show="expo.en"><a target="_blank" href="{{expo.en}}">ANG</a></h4>
  </li>
</ul>

当我修改那些 <textarea>s 的值并尝试更新我的 JSON 文件时，我遇到了困难。

$scope.saveTexts = function () {
$scope.newTexts = JSON.stringify($scope.texts);
$http({
  method: 'POST',
  url: 'http://example.com/js/text.json',
  data: $scope.newTexts,
  contentType: 'application/json; charset=utf-8',
  dataType: 'json'
});

}

我猜这是异步调用的问题或我使用 JSON.stringify 的方式当我控制台日志时，我的更改不会出现。

当我尝试添加元素时它也无法正常工作：

如果我在 ng-click 中使用此功能，我的视图将更新并添加此类元素，但不会在我的 $scope.texts 中

$scope.addExpo = function(){
$scope.texts.push({
  "id": 35,
  "title": "TEST",
  "section": "expositions",
  "text": "TEST",
  "url": "TEST  ",
  "fr": "",
  "es": "",
  "en": "",
  "active": true
});

提前致谢，很抱歉发了这么长的帖子。

【问题讨论】：

您不能使用$http 直接保存到文件中。您需要一个可以接收POST 内容并访问底层文件系统的服务器。
您对后端服务器有控制权吗？如果有，你用的是什么？
您也不能 POST 到 json 文件。必须使用服务器端编程语言或使用第三方存储服务来存储您的数据

标签： javascript angularjs json angular-ngmodel

【解决方案1】：

您不能通过 $http-request 将数据直接保存到 JSON 文件。这是我的建议：

使用将处理来自 Angular 的请求的服务器端脚本（PHP、Ruby、Python 等）
使用 ngResource - 它有利于 CRUD 操作

【讨论】：

好吧，我没想到。我会尽快实施。可能会使用Python。将发布我的答案。