试图通过控制器和角度访问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服务器数据

回答

相关问题