Question

我对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>

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

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

提前致谢！

Answer 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>

Answer 2

您无法在角度中使用$ http.post进行保存。客户端代码不能也不应该保存到服务器。你可以想象这会是多么危险。

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

使用angular.js获取和更新json

2 个答案: