AngularJS搜索過濾器 - 第一個過濾器：全部，第二個過濾器：特定列

Question

我在做的是：使用2個過濾器和相同模型的角度。首先必須過濾整個模型，另一個過濾器必須過濾一個只有StatusID的特定列，其中我通過下拉菜單進行過濾。 這是代碼。

<div class="col-xs-4"> 
        <div class="col-xs-10"> 

         <h4><b>Search :</b></h4> 
         <div class="input-group"> 
          <span class="input-group-addon"> 
           <span class="glyphicon glyphicon-search"></span> 
          </span> 
          <input type="text" name="search" data-ng-model="filter" class="form-control" placeholder="Search here (e.g. 151234 or Pille)" /> 
         </div> 

        </div> 

         <div class="col-xs-10"> 

         <h4><b>Search by Status :</b></h4> 
         <div class="input-group"> 

         <select data-ng-model="filter.StatusID" class="form-control"> 
          <option value="" selected>-- Select Status --</option> 
          <option value="1"> New </option> 
          <option value="2"> Processing </option> 
          <option value="3"> PR Approved </option> 
          <option value="4">Qouting</option> 
          <option value="5">Qouting Approved</option> 
          <option value="6">PO Processing</option> 
          <option value="7">Closed</option> 
          <option value="8">Cancelled</option> 
          <option value="9">Rejected</option> 
          <option value="10">PO Issued</option> 
          <option value="11">On Delivery</option> 
          <option value="12">Received</option> 
          <option value="13">AP Posting</option> 
          <option value="14">Payment</option> 
          <option value="15">Sourcing</option> 
          <option value="16">Re-Processing</option> 
         </select> 

        </div> 
         </div> 



       </div> 
      </div> 

實際上，如果只使用其中一個過濾器，此代碼正在工作。我希望它能夠一起工作。 當我使用下拉[對象] [對象]出現在我的文本框中。

當我在第一個搜索框上搜索時，我仍然可以使用下拉菜單篩選過濾結果。

有人明白我想說什麼嗎？

Answer 1

在這裏你需要使用兩個過濾器，一個是爲所有人而另一個爲按列過濾。

<div class="col-xs-4"> 
       <div class="col-xs-10"> 

        <h4><b>Search :</b></h4> 
        <div class="input-group"> 
         <span class="input-group-addon"> 
          <span class="glyphicon glyphicon-search"></span> 
         </span> 
         <input type="text" name="search" data-ng-model="filterAllColumns" class="form-control" placeholder="Search here (e.g. 151234 or Pille)" /> 
        </div> 

       </div> 

        <div class="col-xs-10"> 

        <h4><b>Search by Status :</b></h4> 
        <div class="input-group"> 

        <select data-ng-model="filterOptions.StatusID" class="form-control"> 
         <option value="" selected>-- Select Status --</option> 
         <option value="1"> New </option> 
         <option value="2"> Processing </option> 
         <option value="3"> PR Approved </option> 
         <option value="4">Qouting</option> 
         <option value="5">Qouting Approved</option> 
         <option value="6">PO Processing</option> 
         <option value="7">Closed</option> 
         <option value="8">Cancelled</option> 
         <option value="9">Rejected</option> 
         <option value="10">PO Issued</option> 
         <option value="11">On Delivery</option> 
         <option value="12">Received</option> 
         <option value="13">AP Posting</option> 
         <option value="14">Payment</option> 
         <option value="15">Sourcing</option> 
         <option value="16">Re-Processing</option> 
        </select> 

       </div> 
        </div> 



      </div> 
     </div> 

和過濾你的陣列是這樣的：

<div data-ng-repeat="item in myModels | filter : filterAllColumns|filterOptions"></div>

當你點擊下拉菜單，在文本框中看到[目標對象]，在文本框NG-模式應該是一個字符串類型，但當你點擊下拉菜單時，你的ng模型是filter.StatusID，它是一個你分配給下拉模型的JavaScript對象，所以當你點擊下拉列表時，angularjs創建一個過濾器對象併爲filter.StatusID賦值。所以我們應該小心什麼是一個對象和字符串等..，