javascript - 如何将json加载到我的angular.js ng-model中？(How to load json into my angular.js ng-model?)

Question

I have what I think is probably a very obvious question, but I couldn't find an answer anywhere.

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

I am just trying to load some JSON data from my server into the client.

(我只是想从我的服务器加载一些JSON数据到客户端。)

Right now, I am using JQuery to load it with an AJAX call (code below).

(现在，我正在使用JQuery通过AJAX调用加载它（下面的代码）。)

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

This is located in the html file.

(它位于html文件中。)

It works so far, but the issue is that I want to use AngularJS.

(它到目前为止工作，但问题是我想使用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.

(现在，当Angular CAN使用变量时，我无法将整个事物加载到变量中，因此我可以为每个循环使用a。)

This seems to be related to the "$Scope", which is usually located in the .js file.

(这似乎与“$ Scope”有关，它通常位于.js文件中。)

The problem is that I cannot load code from other pages into a .js file.

(问题是我无法将其他页面的代码加载到.js文件中。)

Every example of Angular only shows stuff like this:

(Angular的每个例子都只显示如下内容：)

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

So, this is useful, if IA) Want to type all of this by hand, AND B) If I know in advance what all my data is...

(所以，这很有用，如果IA）想要手动输入所有这些，并且B）如果我事先知道我的所有数据是什么......)

I don't know in advance (the data is dynamic) and I don't want to type it.

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

So, when I tried to change the AJAX call to Angular using $Resource, it doesn't seem to work.

(因此，当我尝试使用$ Resource将AJAX调用更改为Angular时，它似乎不起作用。)

Maybe I can't figure it out, but it is a relatively simple GET request for JSON data.

(也许我无法弄清楚，但它是一个相对简单的GSON数据的GET请求。)

tl:dr I can't get AJAX calls to work in order to load external data into an angular model.

(tl：dr我无法让AJAX调用工作，以便将外部数据加载到角度模型中。)

  ask by MJR_III translate from so

Answer 1

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.

(正如Kris所提到的，您可以使用$resource服务与服务器进行交互，但我得到的印象是您开始使用Angular - 我上周在那里 - 所以我建议您开始直接尝试使用$http服务。)

In this case you can call its get method.

(在这种情况下，您可以调用其get方法。)

If you have the following JSON

(如果您有以下JSON)

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

You can load it like this

(你可以像这样加载它)

var App = angular.module('App', []);

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

The get method returns a promise object which first argument is a success callback and the second an error callback.

(get方法返回一个promise对象，第一个参数是成功回调，第二个参数是错误回调。)

When you add $http as a parameter of a function Angular does it magic and injects the $http resource into your controller.

(当您添加$http作为函数的参数时，Angular会将其魔术并将$http资源注入您的控制器。)

I've put some examples here

(我在这里举了一些例子)

• http://plnkr.co/edit/Wuc6M7?p=preview

  (http://plnkr.co/edit/Wuc6M7?p=preview)

• https://gist.github.com/3938567

  (https://gist.github.com/3938567)