使用angular.js获取和更新json

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>

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

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

提前致谢！

Answer 1

这是一些可以帮助您入门的东西。我将您的json更改为我认为更合适的名称，但是您可以根据需要将其更改回您的目的。如果您确实使用json，则ng-repeat会发现重复的值，因此需要使用track by$index它来修复它。

现场演示在这里（单击）。

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);
  };
});






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