試圖通過控制器和角度訪問json服務器數據

我正在寫一個非常簡單的角度js測試應用程序，並試圖顯示存儲在json服務器上的數據以顯示在視圖中。試圖通過控制器和角度訪問json服務器數據

db.json如下：

{ 
    "examples": [ 
    { 
     "id": 0, 
     "name": "example 0", 
     "description": "Example 0 description." 
    }, 
    { 
     "id": 1, 
     "name": "example 1", 
     "description": "Example 1 description." 
    } 
    ] 
}

控制器如下：

angular.module('my_app') 

.controller('ExampleController', ['$scope', 'exampleFactory', function ($scope, exampleFactory) { 

    $scope.example = exampleFactory.query({ 
     }) 
     .$promise.then(
      function (response) { 
       var examples = response; 
       $scope.message = examples; 
      }, 
      function (response) { 
       $scope.message = "Error: " + response.status + " " + response.statusText; 
      } 
     ); 

}])

工廠如下：

.factory('exampleFactory', ['$resource', 'baseURL', function ($resource, baseURL) { 

     return $resource(baseURL + "examples/:id", null, { 
      'update': { 
       method: 'PUT' 
      } 
     }); 
}]) 
;

而且視圖如下：

<p>Test outside repeat: {{message}}</p> 

<ul> 
    <li ng-repeat="example in examples"> 
     <p>Test in repeat: {{message}}</p> 
     <p>{{example.name}}</p> 
     <p>{{example.description}}</p> 
    </li> 
</ul>

這裏有趣的是數據正在被工廠返回。在上面的例子中，第一個測試（在ng-repeat之外）返回整個集合。但是，ng-repeat內沒有任何內容出現。

我有這個工作使用一個稍微不同的安排使用服務，但它似乎沒有使用工廠工作。

有沒有人知道這是爲什麼，他們可以讓我正確嗎？

感謝燕姿

來源

2016-11-23 Stef

我想你忘記了分配$scope.examples，所以ng-repeat沒有數據遍歷：

angular.module('my_app') 

.controller('ExampleController', ['$scope', 'exampleFactory', function ($scope, exampleFactory) { 

    $scope.example = exampleFactory.query({ 
     }) 
     .$promise.then(
      function (response) { 
       var examples = response; 
       $scope.message = examples; 
       $scope.examples = examples.examples; // I may be reading the JSON wrong here. 
      }, 
      function (response) { 
       $scope.message = "Error: " + response.status + " " + response.statusText; 
      } 
     ); 

}])

來源

2016-11-23 22:16:44 2ps

感謝2ps - 試過了，但它沒有奏效 - 我最終將它排序 - 看到下一個響應的細節，因爲我不能; t得到的代碼在這個答覆中正確顯示:-) – Stef

我建議使用一個工廠，你可以得到的方法工廠在退回前的工廠內部。這是揭示模塊模式，如果好讀到這裏你的興趣JavaScript Design Patterns

angular 
    .module('my_app') 
    .controller('ExampleController', ['$scope', 'exampleFactory', 
    function($scope, exampleFactory) { 
     function getMessageList() { 
     exampleFactory 
      .getMessages() 
      .then(function(messages) { 
      $scope.examples = messages; 
      }) 
      .catch(function(response) { 
      $scope.message = "Error: " + response.status + " " + response.statusText; 
      }); 
     } 
     getMessageList(); 

    } 
    ]) 
    .factory('exampleFactory', ['$http', 'baseURL',function($http, baseURL) { 
     function getMessages() { 
     return $http 
      .get(baseURL) 
      .then(function(jsonResp) { 
      return jsonResp.data; 
      }) 
      .catch(function(error) { 
      //handle error if needed 
      console.log(error); 
      }); 
     } 
     return { 
     getMessages: getMessages 
     }; 
    } 
    ]);

<p>Test outside repeat: {{examples}}</p> 

<ul> 
    <li ng-repeat="example in examples"> 
    <p>Test in repeat: {{message}}</p> 
    <p>{{example.name}}</p> 
    <p>{{example.description}}</p> 
    </li> 
</ul>

來源

2016-11-23 22:21:38 alphapilgrim

謝謝alphapilgrim - 我最終排序它（往上看）。此外，我使用$資源而不是$ http，所以我不會用你的解決方案，但你的意見是有用的和讚賞;-)此外，歡呼的鏈接，這是明天的閱讀排序;-) – Stef

通過如下改變控制最終排序是：

.controller("ExampleController", function($scope, exampleFactory) { 
    exampleFactory.query(function(response) { 
     $scope.examples = response; 

     $scope.examples.$promise.then(
      function (response) { 
       var examples = response; 
       $scope.message = examples; 
      }, 
      function (response) { 
       $scope.message = "Error: " + response.status + " " + response.statusText; 
      } 
    ); 

    }); 
});

也許有點笨重，它如果能夠進一步減少它會很好，但是因爲我對這一切都很陌生，所以我現在就去解決這個問題。

來源

2016-11-23 22:31:12 Stef

試圖通過控制器和角度訪問json服務器數據

回答

相關問題