2015-05-03 36 views
0

我使用的角度與鐵軌,這裏面我有一個index.html.erb網頁,其中命中控制器動作獲取JSON裏面的關聯表的內容通過軌道

def index 
@listings=Listing.all 
end 

/應用給予角。 JS/

var app = angular.module("PetForLife", ['ngResource']); 

我傳遞這個@listings到我的角控制器通過init方法。

現在的問題是,此房源表與表的照片存儲與每一個上市相關的多張照片的關聯,所以在短期我

/Listing.rb/

class Listing < ActiveRecord::Base 
    has_many :photos 
end 

/Photo.rb/

class Photo < ActiveRecord::Base 
    mount_uploader :file_name, PhotoUploader 
    belongs_to :listing 
end 

我的角CONTRO米勒是代碼是

/ListingController.js/

app.controller('ListingController', ['$scope', '$resource', function($scope, $resource) { 
    $scope.post = "Angular Rocks!" 

    $scope.init = function(listings) 
    { 
      $scope.listings = angular.fromJson(listings) 

    } 

    $scope.clear = function(){ 

     delete $scope.listing1.breed_type; 

    } 
    $scope.clearAll = function(){ 

     delete $scope.listing1; 

    } 

}]); 

/index.html.erb/

<div ng-controller="ListingController"> 
<div class="ui divided items" ng-init="init(<%[email protected]_json %>)"> 
    <div class="item" ng-repeat="listing in listings | filter:{'gender':listing1.gender,'pet_type':listing1.pet_type,'breed_type':listing1.breed_type}:true"> 

     <div class="image"> 

     </div> 
     <div class="content listing_content"> 
     <i class="right floated large like icon"></i> 
     <i class="right floated large star icon"></i> 

     <%=link_to '{{listing.title}}','{{listing.id}}',class:'header'%> 
     <div class="meta"> 
      <span class="cinema">Posted On 
      <%@date = '{{listing.created_at}}' %> 
      </span> 
     </div> 
     <div class="description"> 
      {{listing.love_for_pets}} 
     </div> 


     <div class="extra listing_price"> 
      <div class="right floated ui circular facebook icon button"> 
      <i class="facebook icon"></i> 
      </div> 
      <div class="right floated ui circular twitter icon button"> 
      <i class="twitter icon"></i> 
      </div> 

      <div class="right floated ui circular google plus icon button"> 
      <i class="google plus icon"></i> 
      </div> 
      <div class="ui teal tag label"><i class="rupee icon"></i>{{listing.price}}</div> 
     </div> 
     </div> 
    </div> 


    </div> 
    </div> 

在index.html.erb文件,

我想做這樣的事

<%=image_tag listing.photos.first.file_name.url%> 

但是由於angular將此列表作爲json,因此找不到該關聯。

我該如何實現這一點。

回答

0

一般來說,您需要使用類似@listings.to_json(:include => :photos) 而不是@listings.to_json以將關聯包括到json中。

+0

非常感謝,這就是我一直在尋找的。只是一個小問題,爲什麼這個工作沒有成功<%= image_tag'{{listing.photos [0] .file_name.url}}',class:'ui中等圖像',風格:'border-radius:5px; max-width:100%'%> –

+0

好,所以我找到了解決方法,我使用正常的img html標籤,而不是rails的image_tag。有一個解決方案,這使用rails image_tag然後請讓我知道。謝謝,我正在標記你的答案是正確的答案。 –

+0

在引擎蓋下image_tag使用了很多與資產相關的功能,以確保生成的標記有效且指向圖像。使用簡單的標記或通過角模板生成頁面內容對您來說可能更好。 –