![](/img/trans.png)
[英]Angular.js Passing error message from service to controller $scope
[英]passing json data from angular service to scope array in controller
我正在嘗試使用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' };
})
編輯圖片,因為無法在評論中發布圖片
我猜是這樣
$scope.gridOptions = { data: 'myData' };
你會想要
$scope.gridOptions = { data: 'provider_medical_services'};
我將通過示例傳遞工廠數據
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');
});
還需要在angular模塊中注入['ngResource']
的依賴項
也嘗試一下:
[要使用$ resource服務處理數組,可以使用查詢方法]
var fruitData= $resource('http://localhost/folder1/fruitData/');
$scope.items = fruitData.query();
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.