带过滤器的高级搜索 - Angularjs

Question

我正在尝试使用特定过滤器创建高级搜索。 目前在使用过滤器选项时，所有内容都会被搜索，但我希望它更具体。

我想创建一个下拉菜单，让您可以选择搜索名称或地点，而不是搜索所有结果：

<form class="input-group col-md-4 form-inline">
  <input type="text" class="form-control" placeholder="Search captures" ng-model="search"/>
  <div class="input-group-btn">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Options <span class="glyphicon glyphicon-cog"></span> </button>
    <ul class="dropdown-menu">
      <li><input type="radio"  name="searchoption" value="All" id="All" checked><label for="all">Search through all</label></li>
      <li><input type="radio" name="searchoption" value="Birdname" id="Birdname"><label for="birdname">Search by birdname</label></li>
      <li><input type="radio" name="searchoption" value="Place" id="Place"><label for="place">Search by place</label></li>
    </ul>
  </div>
  <span class="input-group-btn">
    <button class="btn btn-default" type="button"><span class="glyphicon glyphicon-search"> </span></button>
  </span>
</form>

根据所选单选按钮，我希望 filter.search 更改：

<li ng-repeat="capture in captures|filter:search:strict|orderBy:'created_at':true|startFrom:currentPage:10" class="masonry-item clickable">

所以基本上我希望用户能够选择一个特定的单选按钮，并且根据他选择的内容，它会搜索一个特定的结果。

在 Angular 文档中，它指出我的搜索输入上的 ng-model 必须是以下之一：

<input type="text" class="form-control" placeholder="Search captures" ng-model="search.$>
<input type="text" class="form-control" placeholder="Search captures" ng-model="search.birdname">
<input type="text" class="form-control" placeholder="Search captures" ng-model="search.place">

虽然我可以根据选中的单选按钮来更改它们的具体方法吗？

希望这很清楚。

Answer 1

变化不大：

• 将 input 的 ng-model 更改为 search[searchBy]

  <input type="text" ng-model="search[searchBy]">
  

• 为所有单选按钮设置相同的ng-model等于searchBy，并根据条件搜索设置value，如$为所有，birdName在@987654331中搜索存储在captures 中的对象的@ 属性，您正试图过滤掉。

  <li><input type="radio" name="searchoption" ng-model="searchBy" value="$" id="All" checked><label
      for="all">Search through all</label></li>
  <li><input type="radio" name="searchoption" ng-model="searchBy" value="birdName" id="Birdname"><label
      for="birdname">Search by birdname</label></li>
  <li><input type="radio" name="searchoption" ng-model="searchBy" value="place" id="Place"><label
      for="place">Search by place</label></li>
  

• 最后一次更改 ng-repeat 以根据 search 中上述单选按钮设置的 searchBy 值过滤掉

  <li ng-repeat="capture in captures|filter:search">...</li>
  

---

在控制器中将searchBy 的初始值设置为等于$，以便在初始页面加载时搜索对象的所有属性，这些属性可以通过从下拉列表中选择不同的属性来更改。

更多示例请查看现有帖子angularjs: change filter options dynamically

Fiddle example mentioned in above post