AngularJSフィルタテーブルをドロップダウンリストを使用して

Question

Angular jsで表にフィルタを作成する必要があります。私はこのコードを持っていますが、私は動作しません。ここでは、私は2つのドロップダウンを持っています：eat_codeとfeeling_codeのために、私はそれらのそれぞれを選択した後に行をフィルタリングしたいと思います。

<div class="widgets"> 
    <div class="row"> 
    <div class="col-md-12"> 
     <div class ="panel"> 
     <div class="panel-heading"> 
      <h3 class="panel-title">Select PID</h3> 
     </div>   
     <div class="panel-body"> 
      <form class="row form-inline ng-pristine ng-valid ng-scope" 
       novalidate name="getBGsForm"> 
      <div class="form-group col-sm-3 col-xs-6" 
       ng-class="{'has-error': getBGsForm.patientID.$invalid && (getBGsForm.patientID.$dirty || getBGsForm.$submitted)}"> 
       <input type="text" class="form-control" 
        ng-model="patientID" 
        placeholder="PID" 
        required name="patientID"> 
       <span class="help-block error-block basic-block" 
        ng-if="getBGsForm.patientID.$error.required">Patient ID is required.</span> 
      </div> 
      <button type="submit" 
        class="btn btn-primary" 
        ng-click="getBGs()">Show BGs</button> 
      </form> 
     </div> 
     </div> 
     <div ba-panel> 
     <div> 
      <div class="col-md-4"> 
      <select class="form-control" 
        ng-model="search.eat_code" 
        ng-options="v.code as (v.code + ' - ' + v.label) for v in dropdownValuesTag"> 
       <option value=""> --- filter by meal tag --- </option> 
      </select>     
      </div> 
      <div class="col-md-4"> 
      <select class="form-control" 
        ng-model="search.feeling_code" 
        ng-options="v.code as (v.code + ' - ' + v.label) for v in dropdownValuesSource"> 
       <option value=""> --- filter by source --- </option> 
      </select>  
      </div> 
     </div> 
     </div> 
     <div ba-panel> 
     <div class="horizontal-scroll"> 
      <div class="form-group select-page-size-wrap "> 
      <label>Rows on page 
       <select class="form-control selectpicker show-tick" 
         title="Rows on page" selectpicker 
         ng-model="smartTablePageSizeBG" 
         ng-options="i for i in [5, 10, 15, 20, 25]"> 
       </select> 
      </label> 
      </div> 
     </div> 
     <table class="table" st-table="displayedCollectionBG" st-safe-src="smartTableDataBG" st-set-filter = "myStrictFilter"> 
      <thead> 
      <tr class="sortable "> 
       <th st-sort="id">Reading Id</th> 
       <th st-sort="value">Value</th> 
       <th st-sort="unit">Unit</th> 
       <th st-sort="timestamp">Timestamp</th> 
       <th st-sort="is_control">Is Control</th> 
       <th st-sort="source">Source</th> 
       <th st-sort="eat_code">Eat Code</th> 
       <th st-sort="feeling_code">Feeling Code</th> 
       <th st-sort="carb"> Carb</th> 
       <th st-sort="note"> Note</th> 
       <th st-sort="storedTimestamp">Stored Timestamp</th> 
       <th st-sort="adaTargetRangeStatus">adaTargetRangeStatus</th> 
       <th>Actions</th> 
      </tr> 
      </thead> 
      <tbody> 
      <tr ng-repeat="item in displayedCollectionBG | filter: search"> 
       <td class="table-id">{{item.id}}</td> 
       <td>{{item.value}}</td> 
       <td>mg/dl</td> 
       <td><span ng-bind="item.timestamp | date:'MM/dd/yyyy hh:mm:ss a'"></span></td> 
       <td>{{item.tags.is_control}}</td> 
       <td>{{item.tags.source}}</td> 
       <td>{{item.tags.eat_code}}</td> 
       <td>{{item.tags.feeling_code}}</td> 
       <td>{{item.tags.carb}}</td> 
       <td>{{item.tags.note}}</td> 
       <td><span ng-bind="item.storedTimestamp | date:'MM/dd/yyyy hh:mm:ss a'"></span></td> 
       <td>{{item.adaTargetRangeStatus}}</td> 
       <td> 
       <div class="buttons"> 
        <a class="btn btn-primary editable-table-button btn-xs" ui-sref="BGs.form({id: {{item.id}}})" ui-sref-opts="{reload: true}">Edit</a> 
       </div> 
       </td> 
      </tr> 
      </tbody> 
      <tfoot> 
      <tr> 
       <td colspan="6" class="text-center"> 
       <div st-pagination="" st-items-by-page="smartTablePageSizeBG" st-displayed-pages="5"></div> 
       </td> 
      </tr> 
      </tfoot> 
     </table> 
     </div> 
    </div> 
    </div> 
</div> 

私は間違っていますか？ありがとうございました！

Answer 1

このお試しください：すべての列のヘッダーをクリックしただけで、あなたが列ベースのフィルタを取得します、あなたがデモを取得します、あなたは「Ajaxの列フィルタのサポート（NEW！）を」を選択する必要があり、それからclick here

を、右側。