3

我对 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）是什么？如果您的答案涉及任何代码，您能否明确说明要将代码添加到哪个文件？

提前致谢！

4

3 回答 3

10

这里有一些东西可以帮助您入门。我将您的 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);
  };
});

如果您想避免将标记包装在额外的 div 中，您需要阅读这篇文章中的信息（单击） 。

<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>
于 2013-11-14T04:43:29.883 回答
1

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

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

于 2016-09-15T13:22:48.830 回答
0

你不能修改服务器上的文件，$http.post那样不行。

于 2015-09-10T10:23:26.490 回答