高级搜索与筛选器 - 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"> 

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

在它指出了搜索输入我的NG-模型必须是下列之一的角文档：

<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

一些变化：

• 变化ng-model为输入到search[searchBy]

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

• 设置相同ng-model等于searchBy所有无线电按钮和设置value为每次搜索条件，如$，birdName在birdName中搜索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最后变化基于由上述单选按钮设置searchBy值滤除search

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

---

设置在控制器的初始值对于searchBy等于$到在初始页面加载时搜索对象的所有属性，通过选择不同的内容可以更改该属性属性从下拉菜单。

更多例子，请看看现有的岗位angularjs: change filter options dynamically

Fiddle example mentioned in above post