Question

我对使用角度js实现rails很有新意。我想要的是我有一个列表索引页面，它使用

给我所有的列表

Listing.all

我的页面中有几个过滤器。让我说我有一个性别过滤器，所以我需要的是当该下拉列表更改带有列表的页面时，它也应该刷新，现在只显示具有所选性别的列表。 / p>

以下是我所做的： -

/ 的application.js /

//= require jquery
//= require jquery_ujs

//= require semantic-ui

//= require dropzone

//= require cloudinary
//= require angular
//= require angular-resource
//= require app.js
//= require_tree ./angular
//= require_tree .

/ ListingController（导轨） /

def index
@listings=Listing.all
end

/ index.html.erb /

<%=select(:listing,:gender,options_for_select([['Male','Male',{class:'item'}],['Female','Female',{class:'item'}]]),{prompt:'Gender'},{:'ng-model'=>'listing.gender',class:'ui dropdown gender'})%>

<div class="ui divided items" ng-controller="ListingCtrl" ng-init="init( <%= @listings.to_json %> )" ng-repeat="listing in listings | filter:listing.gender">

<div class="item">

    <div class="image">

      <img src={{listing.photos.first.file_name.url}} class="header"/>

    </div>
    <div class="content">
      <%=link_to '{{listing.title}}','{{listing}}',class:'header'%>

      <div class="meta">
        <span class="cinema">Posted On

        </span>
      </div>
      <div class="description">
        <p>
          <%='{{listing.love_for_pets}}'%>
        </p>
      </div>
      <div class="extra">
        <div class="ui teal tag label"><i class="rupee icon"></i><%='{{listing.price}}'%></div>
      </div>
    </div>
  </div>

</div>

/ 角/控制器/ ListingController.js /

app.controller('ListingCtrl', ['$scope', '$resource', function($scope, $resource) {

  $scope.init = (listings)
  {
    $scope.listings = angular.fromJson(listings)
  }
}]);

/ app.js /

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

/ 的Gemfile /

gem 'angularjs-rails'

索引页面已加载但未显示列表，控制台上也没有错误。

有人可以帮帮我吗？

Answer 1

我不熟悉rails，但看起来你试图通过某种渲染引擎将数据传递给视图。相反，您需要使用ajax调用（或者您可以使用websockets）对角度进行角度提取，然后将其传递给具有角度的视图。您需要通过附加ng-app =＆＃34; PetForLife＆＃34;在您正在使用的页面上加载角度。到body标签（或html标签） <html ng-app="PetForLife">

使用第一个div标签（或body标签）上的ng-controller属性附加控制器。 <body ng-controller="ListingCtrl">

你应该看看这篇文章，它讨论了从Ruby传递数据到角度的一些不同（好的和坏的）方法： Pass Rails Data to Angular

检查那里的第四种方法。您可以使用角度服务来获取rails数据，然后在角度应用程序中的任何位置注入数据。

使用角度过滤器

1 个答案: