从 ngModel 更新 JSON 元素，然后更新 http POST

Question

好吧，我是 Angular 的新手，但我被卡住了，这可能是一个相当简单的解决方案。

我有一个非常基本的 Angular 应用程序，其中有一个 "Page View/Controller" 和一个 "Admin View/Controller"，它们使用相同的 JSON 文件来填充数据。

显然我想在管理视图中增删改查一些元素，我的意思是修改我的 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> 的值并尝试更新我的 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
});

提前致谢，很抱歉post。

Answer 1

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

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

从 ngModel 更新 JSON 元素，然后更新 http POST

Update JSON element from ngModel then http POST

javascript

json

angularjs

angular-ngmodel