带过滤器的高级搜索-Angularjs

Advanced Search with filter - Angularjs

本文关键字：搜索 -Angularjs 高级 过滤器      更新时间：2023-09-26

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

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

<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模型必须是以下之一：

<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">

不过，根据选中的单选按钮，有没有具体的方法可以更改这些内容？

希望这是清楚的。

很少更改：

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

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

  • 为所有单选按钮设置相同的ng-model等于searchBy，并根据搜索条件设置value，如为所有按钮设置$，为要筛选出的birdName在存储在captures中的对象的birdName属性中进行搜索。

    <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>

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

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

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

更多示例请查看现有的postangularjs：动态更改过滤器选项

上面提到的后的Fiddle示例

相关文章：