如何将json加载到我的角.js ng模型中？

javascript angularjs ajax model

2022-08-30 05:29:46

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

我只是尝试将一些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可以使用变量，但我不能将整个东西加载到变量中，所以我可以为每个循环使用a。这似乎与“$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时，它似乎不起作用。也许我无法弄清楚，但这是一个相对简单的JSON数据GET请求。

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

答案 1

正如Kris所提到的，你可以使用服务与服务器交互，但我得到的印象是你正在开始你的Angular之旅 - 我上周在那里 - 所以我建议直接开始尝试使用这个服务。在这种情况下，您可以调用其方法。$resource$httpget

如果您有以下 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;                
        });
});

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

当您添加为函数Angular的参数时，它会神奇地将资源注入控制器。$http$http

我在这里放了一些例子

答案 2

下面是一个如何将 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 screenshot

我希望每个项目的文本来自“公司名称”字段，ID 来自“客户 ID”字段。

我该怎么做？

我的 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”字段）。

此示例的完整脚本可在此处找到：

具有 Angular 的 JSON 数据

话筒