AngularJS按列使用下拉列表过滤表

时间:2016-10-14 11:53:22

标签: angularjs

我需要对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>

我做错了什么?谢谢!

1 个答案:

答案 0 :(得分:0)

试试这个:click here

从中,您必须选择'Ajax列过滤器支持(新!)',右侧您将获得演示,只需单击每个列的标题,您将获得基于列的过滤器。