passing json data from angular service to scope array in controller

Question

I'm attempting to use ng-grid to display a table of data. However, I'm confused as how to place the data into the angular array to display, as examples show from angular-ui that this is the way to go. Below is a service defined for a rails api call

  app.factory('ProviderMedicalService', ['$resource', function($resource) {
     function ProviderMedicalService() {
       this.service = $resource('/api/provider_medical_services/:providerMedicalServiceId',      {providerMedicalServiceId: '@id'});
     };
     ProviderMedicalService.prototype.all = function() {
       return this.service.query();
     };
   return new ProviderMedicalService;
 }]);

this snippet of code was taken from a tutorial that integrates rails with angular. the $resource is the json data that is made from a custom rails api call. I'm assuming the return new ProviderMedicalServices returns the json data

(function() {
 app.controller('ModalDemoCtrl', ['$scope', 'ProviderMedicalService', '$resource', '$modal', function($scope, ProviderMedicalService, $resource, $modal) {
$scope.provider_medical_services = ProviderMedicalService.all();

In the controller that wraps the table, the tutorial states that the $scope.provider_medical_services helps us extend the api later down the road.

currently my json data is displaying properly, except that it is not being formatted into the table format because of my setup.The following code is just what i'm trying to attempt, and i understand that the data should be inside the controller passed to the array

<div class="gridStyle" ng-grid="gridOptions">
  <ul>
   <li ng-repeat="service in provider_medical_services">
    <p>{{service.name}}  {{service.cash_price | currency}} {{service.average_price |   currency}}</p>
    <p></p>
    <p></p>
   </li>
  </ul>
</div>

basically, my question is how do i pass from the factory into the array like this example?

  $scope.myData = [{name: "Moroni", age: 50},
                 {name: "Tiancum", age: 43},
                 {name: "Jacob", age: 27},
                 {name: "Nephi", age: 29},
                 {name: "Enos", age: 34}];
$scope.gridOptions = { data: 'myData' };
})

edit for image because cant post image in comments

在此处输入图片说明

Answer 1

I'm guessing that instead of

$scope.gridOptions = { data: 'myData' };

you'll want

$scope.gridOptions = { data: 'provider_medical_services'};

Answer 2

I'll give you my example on passing the factory data

Javascript:

fruit = angular.module("fruit", []);

fruit.factory("Fruit", function() {
  return {
    fruits: [
      {name: "Bananas", description: "Yellow and peely"}, 
      {name: "Canteloupe", description: "Tell if its ripe by smelling them"}, 
      {name: "Cherries", description: "Dont try to make jam out of sweet ones"}, 
      {name: "Strawberries", description: "Picking them is murder on your back"},
      {name: "Tomatoes", description: "People used to think they were poisonous" }
     ]
  };
});


fruit.controller("FruitCtrl", function($scope, Fruit) {
  $scope.fruits = Fruit.fruits;
});

HTML:

<!DOCTYPE html>
<html ng-app="fruit">
<head>
<meta name="description" content="Factory example" />
<script src="http://code.jquery.com/jquery.min.js"></script>
<link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap-responsive.css" rel="stylesheet" type="text/css" />
<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body ng-controller="FruitCtrl">
  <ul>
    <li ng-repeat="fruit in fruits">{{fruit.name}}</li>
  </ul>
</body>
</html>

edit in response to OP's comment below:

eg:

fruit.factory('Fruit', function($resource){
    return $resource('http://localhost/folder1/fruitData.json');
});

Also need to inject the dependency of ['ngResource'] in the angular module

Also try this:

[To handle arrays with the $resource service, you can use the query method]

  var fruitData= $resource('http://localhost/folder1/fruitData/');
    $scope.items = fruitData.query();

passing json data from angular service to scope array in controller

Question

2 answers

solution1
0 2014-07-08 22:42:52

solution2
0 2014-07-08 23:24:03

passing json data from angular service to scope array in controller

Question

2 answers

solution1 0 2014-07-08 22:42:52

solution2 0 2014-07-08 23:24:03

solution1
0 2014-07-08 22:42:52

solution2
0 2014-07-08 23:24:03