使用 angular.js 获取和更新 json答案

【问题标题】：Get and update json using angular.js使用 angular.js 获取和更新 json
【发布时间】：2013-11-26 21:35:13
【问题描述】：

我对 angular.js 很陌生，但在完成一项看似简单的任务时遇到了一些麻烦。

我需要从网站上的 json 文件中获取下面的 json，然后将键（英语、西班牙语等）放在我的 html 文件中的标签标签内，然后加载它们对应的值（0、1、3、 2, 1) 到 html 范围输入。

json文件包含：

[{"english":0,"spanish":1,"german":3,"russian":2,"korean":1}]

加载 json 后生成的 html 应该是这样的：

<form>
    <label>English</label>
    <input type="range" min="0" max="4" value="ENGLISH_VALUE_RETRIEVED_FROM_JSON_FILE" >
    <label>Spanish</label>
    <input type="range" min="0" max="4" value="SPANISH_VALUE_RETRIEVED_FROM_JSON_FILE" >
    <label>German</label>
    <input type="range" min="0" max="4" value="GERMAN_VALUE_RETRIEVED_FROM_JSON_FILE" >
    <label>Russian</label>
    <input type="range" min="0" max="4" value="RUSSIAN_VALUE_RETRIEVED_FROM_JSON_FILE" >
    <label>Korean</label>
    <input type="range" min="0" max="4" value="KOREAN_VALUE_RETRIEVED_FROM_JSON_FILE" >
    <input type="submit" text="Save">
</form>

最后，我想在表单上点击保存，并在线更新 json 文件中相应键的值。

构建此示例所需的所有文件（使用 MVC）是什么？如果您的回答涉及任何代码，请您明确说明将代码添加到哪个文件？

提前致谢！

【问题讨论】：

标签： javascript json angularjs

【解决方案1】：

这里有一些东西可以帮助您入门。我将您的 json 更改为我认为更合适的内容，但如果您愿意，您可以将其更改回您的目的。如果您确实使用了 json，那么您会遇到 ng-repeat 查找重复值的问题，您需要使用 track by $index 来修复它。见this post (click)。

Live demo here (click).

var app = angular.module('myApp', []);

/* $http ajax calls really belongs in a service, 
but I'll be using them inside the controller for this demo */ 

app.controller('myCtrl', function($scope, $http) {
  /*$http.get('path/to/json').then(function(data) {
    $scope.languages = data;
  });*/
  //inputting json directly for this example
  $scope.languages = [        
    {name:"English", value:0},
    {name:"Spanish", value:1},
    {name:"German", value:3},
    {name:"Russian", value:2},
    {name:"Korean", value:1}
  ];
  $scope.save = function() {
    /*$http.post('path/to/server/file/to/save/json', $scope.languages).then(function(data) {
      $scope.msg = 'Data saved';
    });*/
    $scope.msg = 'Data sent: '+ JSON.stringify($scope.languages);
  };
});

如果您想避免将标记包装在额外的 div 中，则需要阅读 this post (click) 中的信息。

<form>
    <div ng-repeat="lang in languages">
      <label>{{lang.name}}</label>
      <input type="range" min="0" max="4" ng-model="lang.value" >
    </div>
    <button ng-click="save()">Save</button>
    <p>{{msg}}</p>
</form>

【讨论】：

非常感谢，帮了大忙！
对不起，这一切都是新手，我会做的:)
@rosciood 非常感谢 :)

【解决方案2】：

你不能在 Angular 中使用 $http.post 来保存。客户端代码不能也不应该保存到服务器。你可以想象这会有多危险。

相反...您可以设置 NodeJS/Express（或其他）以接受 $http.post 中的 JSON 数据。然后，您可以使用服务器端平台将数据写入文件。但是，我建议不要将数据保存到服务器上的 .json 文件中。我将 .json 文件设为只读文件，主要用于填充静态变量。您应该考虑将这些类型的文档存储在像 CouchDB 或 MongoDB 这样的文档存储中。

【讨论】：

【解决方案3】：

你不能修改服务器上的文件，$http.post 不能这样工作。

【讨论】：