如何将json加载到我的angular.jng模型中?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (23)

我有我认为可能是一个非常明显的问题,但我无法在任何地方找到答案。

我只是试图从我的服务器加载一些JSON数据到客户端。现在,我正在使用JQuery通过AJAX调用加载它(下面的代码)。

<script type="text/javascript">
var global = new Array();
$.ajax({
    url: "/json",
    success: function(reports){
        global = reports;
        return global;
        }
    });
</script>

这位于html文件中。它的工作到目前为止,但问题是我想使用AngularJS。现在,虽然Angular使用变量,但我无法将整个变量加载到变量中,因此我可以在每个循环中使用一个变量。这似乎与“$ Scope”有关,它通常位于.js文件中。

问题是我无法将其他页面的代码加载到.js文件中。Angular的每个例子只显示像这样的东西:

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

所以,这是有用的,如果A)想要手工输入所有这些,并且B)如果我事先知道我的所有数据是什么......

我事先不知道(数据是动态的),我不想输入它。

所以,当我尝试使用$ Resource将AJAX调用更改为Angular时,它似乎不起作用。也许我不明白,但它是一个相对简单的GET请求JSON数据。

提问于
用户回答回答于

可以使用该$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对象,其中第一个参数是成功回调,第二个是错误 回调。

当你$http作为一个函数的参数添加时,Angular会变魔术并将$http资源注入到你的控制器中。

我在这里举了一些例子

用户回答回答于

以下是如何将JSON数据加载到Angular模型的简单示例。

我有一个JSON'GET'Web服务,它从微软Northwind SQL Server数据库的在线副本中返回客户详细信息列表。

http://www.iNorthwind.com/Service1.svc/getAllCustomers

它返回一些JSON数据,如下所示:

{ 
    "GetAllCustomersResult" : 
        [
            {
              "CompanyName": "Alfreds Futterkiste",
              "CustomerID": "ALFKI"
            },
            {
              "CompanyName": "Ana Trujillo Emparedados y helados",
              "CustomerID": "ANATR"
            },
            {
              "CompanyName": "Antonio Moreno Taquería",
              "CustomerID": "ANTON"
            }
        ]
    }

..我想用这些数据填充一个下拉列表,看起来像这样...

我希望每个项目的文本来自“CompanyName”字段,ID来自“CustomerID”字段。

我会怎么做?

我的Angular控制器看起来像这样:

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

...用这组JSON数据填充“listOfCustomers”变量。

然后,在我的HTML页面中,我会使用这个:

<div ng-controller='MikesAngularController'>
    <span>Please select a customer:</span>
    <select ng-model="selectedCustomer" ng-options="customer.CustomerID as customer.CompanyName for customer in listOfCustomers" style="width:350px;"></select>
</div>

就是这样。我们现在可以在网页上看到我们的JSON数据列表,随时可以使用。

关键是在“ng-options”标签中:

customer.CustomerID as customer.CompanyName for customer in listOfCustomers

当用户选择此列表中的项目时,“$ scope.selectedCustomer”变量将被设置为该客户记录的ID(客户ID字段)。

这个例子的完整脚本可以在这里找到:

JSON数据与Angular

扫码关注云+社区