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

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

我只是试图从我的服务器加载一些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使用variables,我不能加载到一个variables,所以我可以使用每个循环。 这似乎与“$ Scope”有关,它通常位于.js文件中。

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

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

所以,这是有用的,如果IA)要手工input所有这一切,并B)如果我事先知道我的所有数据是…

我不知道(数据是dynamic的),我不想打字。

所以,当我试图改变使用$资源的Angular的AJAX调用,似乎并没有工作。 也许我不能弄明白,但它是一个相对简单的GET请求JSON数据。

tl:dr我不能让AJAX调用工作,以便将外部数据加载到angular度模型中。

2 Solutions collect form web for “如何将json加载到我的angular.js ng模型中?”

正如Kris提到的那样,您可以使用$resource服务与服务器进行交互,但是我得到的印象是您开始使用Angular的旅程 – 上周我在那里 – 所以我build议直接开始使用$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对象,其中第一个参数是成功callback,第二个是错误callback。

当你添加$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" } ] } 

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

Angular截图

我希望每个项目的文本来自“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”variables。

然后,在我的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 

这是一个奇怪的语法让你的头!

当用户在此列表中select一个项目时,“$ scope.selectedCustomer”variables将被设置为该客户logging的ID(CustomerID字段)。

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

JSON数据与Angular

麦克风

  • 在Angular.js中可以注入什么“东西”?
  • 如何在AngularJs中设置全局http超时
  • 如何在angular度js应用程序的量angular器中禁用animation
  • Ng型不更新控制器值
  • 从Angular中的服务器下载文本/ csv内容作为文件
  • 如何使用ASP.NET MVC和AngularJS路由?
  • 在编写AngularJs应用程序时,使用Jade或Handlebars有什么用处
  • ReferenceError:模块未定义 - 使用Angular / Laravel应用程序的Karma / Jasmineconfiguration
  • CoffeeScript - 不允许在Angularexpression式中引用DOM节点
  • angular1.5组件与旧指令 - 哪里是链接function?
  • Angular vs Angular 2