내 angular.js ng-model에 json을로드하는 방법은 무엇입니까?

나는 아마도 매우 명백한 질문이라고 생각하지만 어디에서도 답을 찾을 수 없었습니다.

내 서버에서 클라이언트로 일부 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는 변수를 사용할 수 있지만 모든 것을 변수에로드 할 수 없으므로 for each 루프를 사용할 수 있습니다. 이는 일반적으로 .js 파일에있는 "$ Scope"와 관련된 것으로 보입니다.

문제는 다른 페이지의 코드를 .js 파일로로드 할 수 없다는 것입니다. Angular의 모든 예제는 다음과 같은 것만 보여줍니다.

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

따라서 IA)이 모든 것을 손으로 입력하고 B) 모든 데이터가 무엇인지 미리 알고있는 경우에 유용합니다.

사전에 알지 못하며 (데이터가 동적 임) 입력하고 싶지 않습니다.

따라서 $ Resource를 사용하여 AJAX 호출을 Angular로 변경하려고 시도했을 때 작동하지 않는 것 같습니다. 이해할 수 없을 수도 있지만 JSON 데이터에 대한 비교적 간단한 GET 요청입니다.

tl : dr 외부 데이터를 각도 모델에로드하기 위해 AJAX 호출이 작동하도록 할 수 없습니다.

Kris가 언급했듯이 $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컨트롤러에 리소스를 주입합니다 .

여기에 몇 가지 예를 넣었습니다.

• http://plnkr.co/edit/Wuc6M7?p=preview
• https://gist.github.com/3938567

다음은 Angular 모델에 JSON 데이터를로드하는 방법에 대한 간단한 예입니다.

Microsoft Northwind SQL Server 데이터베이스 의 온라인 복사본에서 고객 세부 정보 목록을 반환하는 JSON 'GET'웹 서비스가 있습니다.

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

... "listOfCustomers"변수를이 JSON 데이터 세트로 채 웁니다.

그런 다음 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 데이터

마이크

나는 인터넷 어딘가에서 소스를 기억하지 못하는 다음 코드를 사용합니다.

    var allText;
    var rawFile = new XMLHttpRequest();
    rawFile.open("GET", file, false);
    rawFile.onreadystatechange = function () {
        if (rawFile.readyState === 4) {
            if (rawFile.status === 200 || rawFile.status == 0) {
                allText = rawFile.responseText;
            }
        }
    }
    rawFile.send(null);
    return JSON.parse(allText);