3

我有一个我正在开发的 Rails 应用程序，它是一个 API 数据库：http: //hapily.herokuapp.com/它已经有一个我在 Rails 中制作的有效搜索框，但我想使用 angular。 js 让搜索在不离开主页的情况下工作。我似乎无法获得与我的 Rails 数据库连接的角度。这是搜索表格：

<form class="navbar-search" method="get" action="/apis/search" id="search">
    <input type="text" class="search-query" placeholder="Search" name="query" ng-model="query">
</form>

这是我的 apis_controller.rb 中的搜索方法：

def search
    @results = Api.where("name ILIKE ? OR description ILIKE ? OR category ILIKE ?", "%#{params[:query]}%", "%#{params[:query]}%", "%#{params[:query]}%").all
end

这是我的 js 搜索控制器：

app = angular.module("Hapily", ["ngResource"])

@SearchCtrl = ($scope, $resource) ->
  Search = $resource('/search/:query', {query:"@query"})
  $scope.results = Search.get()

这是我当前的搜索页面视图：

<% @results.each do |api| %>
<div class="box" ng-repeat="result in results | filter:query">
    <div class="api-favicon">
    <%= image_tag("http://www.google.com/s2/favicons?domain_url=" + api.url) %>
    </div>
    <%= link_to api.name, apipage_path(:id => api.id) %>
    <p class="category"><%= api.category %></p><br><br>
    <%= api.description %><br><br>

    Votes: <%= Vote.where("api_id = ?", api.id).count %>
    <%= link_to image_tag('grayarrow.gif'), votes_path(api_id: api.id, value: 1), method: :post  %>
</div>
<% end %>
</div>

现在所有的 API 都显示在索引页面上，当用户在导航栏中的搜索框中键入一个术语时，他们会被定向到 /search?query=searchterm 我应该如何更改我的代码以获取匹配的 API 以呈现索引页？我在角度和导轨方面很新，所以我可能会离开这里。任何帮助表示赞赏！

4

1 回答 1

2

您正在使用服务器端过滤

def search
    @results = Api.where("name ILIKE ? OR description ILIKE ? OR category ILIKE ?", "%#{params[:query]}%", "%#{params[:query]}%", "%#{params[:query]}%").all
end

连同客户端过滤

<div class="box" ng-repeat="result in results | filter:query">

你只需要其中之一。

对于仅使用 AngularJS 过滤，首先要重命名您的服务器控制器，display而不是search让结果成为一切

def display
    @results = Api.all
end

那么你的 js 控制器可以是：

app = angular.module("Hapily", ["ngResource"])

@SearchCtrl = ($scope, $resource) ->
  Search = $resource('/display/')
  $scope.results = Search.get()

和你的页面（注意我添加的输入，以及 angular 循环不是 ruby​​ 的事实）：

<input ng-model="query"/> 
<div class="box" ng-repeat="result in results | filter:query">
    <div class="api-favicon">
    <%= image_tag("http://www.google.com/s2/favicons?domain_url=" + api.url) %>
    </div>
    <%= link_to api.name, apipage_path(:id => api.id) %>
    <p class="category"><%= api.category %></p><br><br>
    <%= api.description %><br><br>

    Votes: <%= Vote.where("api_id = ?", api.id).count %>
    <%= link_to image_tag('grayarrow.gif'), votes_path(api_id: api.id, value: 1), method: :post  %>
</div>
于 2013-05-23T01:02:47.837 回答