如何將json文件數據傳遞給Angular指令

我試圖傳遞每次訪問顯示頁面時創建的json文件數據。我正在使用一個主父對象，「儀表板」來操作整個json樹中的數據。我嘗試過使用工廠多次重構Angular控制器，但我仍然爲每個div獲取文字{{resource}}輸出。如何將json文件數據傳遞給Angular指令

這是JSON數組位於分貝/ JSON/dashboard1.json：

[{"id":1,"created_at":"2015-09-15T20:32:14.372Z","updated_at":"2015-09-15T20:32:14.372Z","cruises":[{"id":1,"name":"Trogdor Cruises","ship_name":"Burninator","created_at":"2015-09-15T06:54:06.181Z","updated_at":"2015-09-15T06:54:06.181Z","dashboard_id":1,"sailings":[{"id":70,"name":"Mexico Cruise","cruise_id":1,"main_image":"http://i.imgur.com/a82YKej.jpg","created_at":"2015-09-15T06:54:06.359Z","updated_at":"2015-09-15T06:54:06.359Z","sailing_options":[{"id":13,"sailing_id":70,"price":350,"date":"Feb 18, 2016","created_at":"2015-09-15T06:54:06.540Z","updated_at":"2015-09-15T06:54:06.540Z"},{"id":14,"sailing_id":70,"price":300,"date":"March 20, 2016","created_at":"2015-09-15T06:54:06.546Z","updated_at":"2015-09-15T06:54:06.546Z"},{"id":15,"sailing_id":70,"price":250,"date":"June 30, 2016","created_at":"2015-09-15T06:54:06.591Z","updated_at":"2015-09-15T06:54:06.591Z"}]}]}]

該文件是很長，但是這是它的要點。有4個級別的層次結構。這是我的主角度文件，其中包含控制器：

var dashboardCenter = angular.module('DashboardCenter', []); 

    dashboardCenter.controller("dashboardController", [ '$scope', '$http', function($scope, $http) { 
     $http({ method: 'GET', url: 'db/jsondata/dashboard1.json'}).success(function(data){ 
     $scope.dashboard = data; 
     }); 
}]);

這是導致我試圖實現的觀點：

<div class="container" ng-app="DashboardCenter"> 
    <h1>Main Dashboard</h1> 
    <div ng-controller="dashboardController"> 
     <div ng-repeat="cruise in dashboard.cruises"> 
      <div>{{ cruise.name }}</div> 
      <div>{{ cruise.ship_name }}</div> 
      <div ng-repeat="sailing in cruise.sailings"></div> 
      <div>{{ sailing.name }}</div> 
      <div>{{ sailing.main_image }}</div> 
      <div ng-repeat="sailing_option in sailing.sailing_options"> 
       <div>{{ sailing_option.price}}</div> 
       <div>{{ sailing_option.date}}</div> 
      </div> 
     </div> 
    </div> 
</div>

而且這是在創建JSON文件我的軌控制器。也許這是罪魁禍首。

class DashboardsController < ApplicationController 

     respond_to :json 

     def write_json(d) 
     @dashb = Dashboard.where(id: 1) 
     @dashboard = @dashb.to_json(:include => {:cruises => 
         {:include => {:sailings => 
         {:include => :sailing_options}}}}) 
     File.open("db/jsondata/dashboard1.json","w") do |f| 
      f.write(@dashboard) 
     end 
     end 

     def main_board 
     @dashboard = Dashboard.where(id: 1) 
     write_json(@dashboard) 
     end 
    end

我想循環使用ng-repeat的每個類別，每個類別都是下一個的父級。我在論壇上尋找了一段時間的答案。如果這是一個簡單的問題，我很抱歉。我對Angular非常陌生。謝謝。

來源

2015-09-16 Knight Kolas

你說的「似乎沒有任何工作」是什麼意思？你看到任何結果？控制檯中是否有錯誤？您應該爲$ http調用添加一個錯誤處理程序。最後，成功處理程序中的'data'應該已經是一個對象，所以不需要解析它。 –

這是我爲每個div獲得的輸出：{{cruise.name}}。以前，我嘗試過使用測試控制器，並輸出正確的數據，這將是Cruise的名稱。在這種情況下，我會改變Json.parce部分。 –

如果您的代碼正在輸出表達式「{{}}」，那麼由於某種原因，角度不會加載。你的控制檯有什麼錯誤？ – Claies

您的代碼中有幾個格式錯誤。但我得到它的工作。更改您的數組：

[{"id":1, 
     "cruises":[{"id":1,"name":"Trogdor Cruises","ship_name":"Burninator", "dashboard_id":1}], 
     "sailings":[{"id":70,"name":"Mexico Cruise","cruise_id":1,"main_image":"http://i.imgur.com/a82YKej.jpg","created_at":"2015-09-15T06:54:06.359Z","updated_at":"2015-09-15T06:54:06.359Z"}], 
     "sailing_options":[{"id":13,"sailing_id":70,"price":350,"date":"Feb 18, 2016","created_at":"2015-09-15T06:54:06.540Z","updated_at":"2015-09-15T06:54:06.540Z"}]}];

而且在你的HTML顯示代碼更改

<body ng-controller="dashboardController"> 
<h1>Main Dashboard</h1> 
<div ng-repeat="board in dashboard"> 
    <div ng-repeat="cruise in board.cruises"> 
     <div>{{ cruise.name }}</div> 
     <div>{{ cruise.ship_name }}</div> 
    </div> 
    <div ng-repeat="sailing in board.sailings"> 
     <div>{{ sailing.name }}</div> 
     <div>{{ sailing.main_image }}</div> 
    </div> 
    <div ng-repeat="sailing_option in board.sailing_options"> 
     <div>{{ sailing_option.price}}</div> 
     <div>{{ sailing_option.date}}</div> 
    </div> 
</div>

來源

2015-09-16 01:40:33

對不起，我試過這個，但它仍在輸出文字{{resouce}}調用。此外，每一個都是下一個的父級，它們必須一起輸出。因爲它們彼此之間沒有關聯關係，而且它們都屬於儀表板。它應該是儀表板>巡航>航行> saling_options。儘管如此，感謝您的及時迴應。 –

如何將json文件數據傳遞給Angular指令

回答

相關問題