如何将 json 加载到我的 angular.js ng-model 中? [英] How to load json into my angular.js ng-model?
问题描述
我有一个我认为可能很明显的问题，但我在任何地方都找不到答案.
I have what I think is probably a very obvious question, but I couldn't find an answer anywhere.
我只是想将一些 JSON 数据从我的服务器加载到客户端.现在，我正在使用 JQuery 通过 AJAX 调用(下面的代码)加载它.
I am just trying to load some JSON data from my server into the client. Right now, I am using JQuery to load it with an AJAX call (code below).
<script type="text/javascript">
var global = new Array();
$.ajax({
url: "/json",
success: function(reports){
global = reports;
return global;
}
});
</script>
它位于 html 文件中.到目前为止它有效，但问题是我想使用 AngularJS.现在，虽然 Angular CAN 使用变量，但我无法将整个内容加载到变量中，因此我可以为每个循环使用 a.这似乎与$Scope"有关，它通常位于 .js 文件中.
This is located in the html file. It works so far, but the issue is that I want to use AngularJS. Now, while Angular CAN use the variables, i cannot load the whole thing into a variable so I can use a for each loop. This seems to be related to the "$Scope", which is usually located in the .js file.
问题是我无法将其他页面的代码加载到 .js 文件中.Angular 的每个例子只显示这样的东西:
The problem is that I cannot load code from other pages into a .js file. Every example of Angular only shows stuff like this:
function TodoCtrl($scope) {
$scope.todos = [
{text:'learn angular', done:true},
{text:'build an angular app', done:false}];
所以，这很有用，如果我A) 想要手动输入所有这些，并且B) 如果我事先知道我所有的数据是什么...
So, this is useful, if I A) Want to type all of this by hand, AND B) If I know in advance what all my data is...
我事先不知道(数据是动态的)，我不想输入.
I don't know in advance (the data is dynamic) and I don't want to type it.
因此，当我尝试使用 $Resource 将 AJAX 调用更改为 Angular 时，它似乎不起作用.可能我没搞明白，不过是比较简单的 JSON 数据的 GET 请求.
So, when I tried to change the AJAX call to Angular using $Resource, it doesn't seem to work. Maybe I can't figure it out, but it is a relatively simple GET request for JSON data.
tl:dr 我无法通过 AJAX 调用将外部数据加载到角度模型中.
推荐答案
正如 Kris 提到的，您可以使用 $resource 服务与服务器进行交互，但我的印象是您正在开始Angular 之旅 - 我上周在那里 - 所以我建议直接开始试验 $http 服务.在这种情况下，您可以调用它的 get 方法.
As Kris mentions, you can use the $resource service to interact with the server, but I get the impression you are beginning your journey with Angular - I was there last week - so I recommend to start experimenting directly with the $http service. In this case you can call its get method.
如果您有以下 JSON
If you have the following 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回调.
The get method returns a promise object which
first argument is a success callback and the second an error
callback.
当你添加 $http 作为函数的参数时 Angular 会变魔术吗并将 $http 资源注入您的控制器.
When you add $http as a parameter of a function Angular does it magic
and injects the $http resource into your controller.
我在这里举了一些例子
这篇关于如何将 json 加载到我的 angular.js ng-model 中?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
