如何将json加载到我的angular.js ng-model中？

14 浏览
0 Comments

如何将json加载到我的angular.js ng-model中？

我有一个可能非常明显的问题，但是我在任何地方都找不到答案。\n我只是想将服务器上的一些JSON数据加载到客户端。目前，我正在使用JQuery通过AJAX调用来加载它（以下是代码）。\n

\n这段代码位于html文件中。目前它可以工作，但问题是我想使用AngularJS。然而，虽然Angular可以使用变量，但我无法将整个内容加载到一个变量中，以便我可以使用for each循环。这似乎与\"$Scope\"有关，通常位于.js文件中。\n问题是我不能将其他页面的代码加载到.js文件中。每个Angular的示例只显示类似于以下内容的东西：\n

function TodoCtrl($scope) {
  $scope.todos = [
    {text:'learn angular', done:true},
    {text:'build an angular app', done:false}];

\n所以，这很有用，如果我\nA）想手动输入所有内容，和\nB）如果我事先知道我的所有数据是什么...\n我不知道事先（数据是动态的），而且我不想手动输入它。\n所以，当我尝试将AJAX调用更改为使用$Resource的Angular时，似乎不起作用。也许我弄不明白，但这只是一个相对简单的获取JSON数据的GET请求。\ntl:dr 我无法使AJAX调用工作，以便将外部数据加载到一个Angular模型中。

0

3 答案

0 Comments

问题：如何将JSON加载到我的Angular.js ng-model中？

原因：该问题的出现可能是因为用户想要将从服务器获取的JSON数据加载到Angular.js的ng-model中，但是不清楚如何实现。

解决方法：用户可以使用以下代码将JSON加载到Angular.js的ng-model中：

    // 创建一个XMLHttpRequest对象
    var rawFile = new XMLHttpRequest();
    
    // 打开一个HTTP请求
    rawFile.open("GET", file, false);
    
    // 监听请求状态的变化
    rawFile.onreadystatechange = function () {
        if (rawFile.readyState === 4) {
            if (rawFile.status === 200 || rawFile.status == 0) {
                // 将服务器响应的JSON数据赋值给ng-model
                $scope.ngModel = JSON.parse(rawFile.responseText);
            }
        }
    }
    
    // 发送HTTP请求
    rawFile.send(null);

以上代码将JSON数据赋值给Angular.js的ng-model变量，以便在页面中使用该数据。

0
0 Comments

问题的原因是想要将JSON数据加载到Angular模型中，并将其显示在下拉列表中。解决方法是通过使用Angular的$http服务发送GET请求来获取JSON数据，并将其赋值给$scope.listOfCustomers变量。然后，在HTML页面中使用ng-options指令来设置下拉列表的选项。最后，当用户在列表中选择一个项目时，$scope.selectedCustomer变量将被设置为所选客户的ID。以下是完整的代码示例：

function MikesAngularController($scope, $http) {
    $scope.listOfCustomers = null;
    $http.get('http://www.iNorthwind.com/Service1.svc/getAllCustomers')
         .success(function (data) {
             $scope.listOfCustomers = data.GetAllCustomersResult;
         })
         .error(function (data, status, headers, config) {
             //  Do some error handling here
         });
}



    Please select a customer:

关键是在ng-options标签中使用的语法：

customer.CustomerID as customer.CompanyName for customer in listOfCustomers

这个语法可能比较奇怪，但它是用来设置下拉列表选项的。

原始链接：[JSON data with Angular](http://www.mikesknowledgebase.com/pages/Services/WebServices-Page8.5.htm)

0
0 Comments

如Kris所提到的，您可以使用$resource服务与服务器交互，但我觉得您可能刚刚开始接触Angular - 我上周也是这样 - 所以我建议直接开始使用$http服务进行实验。在这种情况下，您可以调用它的get方法。

如果您有以下JSON数据：

[{ "text":"learn angular", "done":true },
 { "text":"build an angular app", "done":false},
 { "text":"something", "done":false },
 { "text":"another todo", "done":true }]

您可以像这样加载它：

var App = angular.module('App', []);
App.controller('TodoCtrl', function($scope, $http) {
  $http.get('todos.json')
       .then(function(res){
          $scope.todos = res.data;                
        });
});

get方法返回一个promise对象，其第一个参数是success回调函数，第二个参数是error回调函数。

当您将$http作为函数的参数时，Angular会自动将$http资源注入到您的控制器中。

我在这里放了一些例子：

非常感谢，我最终确实使用了$http服务...尽管方式略有不同... code $http.get('/json').success( function(response){ $scope.reports = response; getData(); code 我觉得有趣的是promise对象...我真的想更多地了解它。我喜欢这个想法。我遇到的另一个问题是基本上在ajax请求上运行循环，以便我可以自动刷新页面。$timeout对我来说一直不起作用。

我认为应该是$scope.todos = res;而不是res.data。

响应对象有四个属性：config，data，headers和status。data属性中的值是您想要的。

在http请求之前加上$scope.todos = [];是值得的，这样至少您有一个默认的空结构，以免在模板中抛出错误。

这个例子在Firefox中正常工作，但在Chrome中不正常。

关于$scope.todos = res;或$scope.todos = res.data; -- 区别在于您是在.then(response)还是在.success(result)中。 .success给出的是response.data，而.then给出的是整个response。

0