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

几乎没有变化：

将输入的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

带过滤器的高级搜索 - Angularjs

1 个答案: