javascript - 从 ngModel 更新 JSON 元素，然后使用 http POST

Question

好吧，我对 Angular 还很陌生，但我陷入了困境，这可能是一个相当简单的解决方案。

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

显然我想在管理 View 中增删改查一些元素，我的意思是修改我的 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
  }

我在 Controller 的范围内获得了所有这些元素

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

一切正常，我可以用 ngModel 填充我的 View 。

<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 中使用此函数，我的 View 将更新并添加此类元素，但不会在我的 $scope.texts 中

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

提前致谢，对于这么长的帖子表示歉意。

Answer 1

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

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