2014-11-02 14 views
10

Tôi đang lấy dữ liệu JSON của mình từ máy chủ, nhưng sự cố xảy ra khi cố gắng liệt kê nó tại trang của tôi bằng cách sử dụng chỉ thị ng-repeat.

Dưới đây là nội dung cơ HTML của tôi, nơi 'mydata' (JSON mảng) được hiển thị một cách chính xác ngay sau khi $ http.get() phương pháp nhận dữ liệu được yêu cầu, nhưng ng-lặp lại không phải là liệt kê các phần tử mảng:

<body ng-app="myapp"> 
    <div ng-controller="MyController" > 
    Data from server: {{ mydata }}   
    </div> 

    <hr> 

    <ul ng-controller="MyController as controller"> 
    <li ng-repeat="data in controller.mydata"> 
     {{ data }} 
    </li> 
</ul> 
</body> 

Và đây là đoạn code javascript:

var URI = 'http://my_service_uri/'; 

angular.module("myapp", []) 
    .controller("MyController", function($scope, $http) { 
     $scope.mydata = []; 

     $http.get(URI) 
      .then(function(result) { 
       $scope.mydata = result.data; 
      }); 
    }); 

Trả lời

18

Bạn đang trộn lên các điều khiển như cú pháp và phạm vi sử dụng. Xem plunker của tôi tại http://plnkr.co/qpcKJZx4jovC6YdzBd6J và bạn sẽ thấy một ví dụ.

Thay đổi chính là khi sử dụng bộ điều khiển như cú pháp bạn cần để ràng buộc các biến của bạn vào đó.

app.controller('MyController', function($http) { 
    var vm = this; 
    vm.mydata = []; 

    $http.get(URI) 
     .then(function(result) { 
      console.log(result); 
      vm.mydata = result.data; 
     }); 

Chọn một phương pháp xuất bản dữ liệu chế độ xem của bạn và gắn với nó, bộ điều khiển hoặc $ scope.

Bạn sẽ thấy các "dữ liệu từ máy chủ" từ trên không còn làm việc trong plunker, bởi vì tôi đã không thay đổi điều đó một để sử dụng bộ điều khiển như cú pháp.

+0

Cảm ơn bạn đã trả lời, hiện đang hoạt động hoàn hảo. Tôi thấy những gì tôi đã làm sai, và cảm ơn bạn đã tư vấn, tôi sẽ dính vào một phương pháp xuất bản dữ liệu xem, hoặc bộ điều khiển hoặc phạm vi $. – charliebrownie

+0

Tôi đã sử dụng phương pháp này mà không thành công cho đến khi tôi sử dụng '$ scope. $ Apply();' sau đó ng-repeat được đáp ứng. – ThisClark

Các vấn đề liên quan