Question

我正在尝试使用ng-grid来显示数据表。但是，我很困惑如何将数据放入角度数组中进行显示，如例如angular-ui所示，这是要走的路。以下是为rails api调用定义的服务

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

这段代码取自一个将rails与angular集成在一起的教程。 $resource是由自定义rails api调用生成的json数据。我假设return new ProviderMedicalServices返回json数据

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

在包装表的控制器中，教程指出$scope.provider_medical_services可以帮助我们在以后扩展api。

目前我的json数据显示正常，但由于我的设置没有将其格式化为表格格式。以下代码正是我试图尝试的内容，我明白数据应该在控制器传递给数组

<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>

基本上，我的问题是如何从工厂传递到像这个例子一样的数组？

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

编辑图片，因为无法在评论中发布图片

enter image description here

Answer 1

我猜测而不是

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

你想要

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

Answer 2

我将举例说明传递工厂数据

<强>使用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>

编辑以回应以下OP的评论：

例如：

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

还需要在角度模块

中注入['ngResource']的依赖关系

也试试这个：

[要使用$ resource服务处理数组，可以使用查询方法]

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

将角度服务中的json数据传递给控制器中的范围数组

2 个答案:

将角度服务中的json数据传递给控制器​​中的范围数组

2 个答案:

将角度服务中的json数据传递给控制器中的范围数组