フィルタを使用した高度な検索 - 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"> 

だから基本的には、ユーザーが特定のラジオボタンを選択できるようにし、彼が選んだ内容に応じて特定の結果を検索します。

<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-モデルは、次のいずれかである必要があることを述べてアンギュラドキュメントで

チェック？

これは明らかです。

Answer 1

いくつかの変更：同じセットsearch[searchBy]

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

から入力ため

• 変更ng-modelng-modelはすべてラジオボタンのsearchByに等しいとして、検索ごととしてvalueを設定しますすべての場合$のような条件、birdNamecapturesに格納されているオブジェクトのプロパティを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> 
  

• $に等しいsearchByためのコントローラに初期値を設定search

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

---

上記ラジオボタンにより設定searchBy値に基づいてフィルタリングするng-repeatにおける最後の変更最初のページの読み込み時にオブジェクトのすべてのプロパティを検索します。異なるものを選択することで変更できますプロパティをドロップダウンします。

より例えば

既存のポストを見てくださいangularjs: change filter options dynamically

Fiddle example mentioned in above post