Question

我有一个我正在研究的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在索引页面上呈现？我在角度和轨道方面都很陌生，所以我可能会离开这里。任何帮助表示赞赏！

Answer 1

您正在使用服务器端过滤

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>

在Rails应用程序中实现Angularjs搜索过滤

1 个答案: