无法使用智能表中的select进行过滤

时间:2017-10-20 16:10:19

标签: angularjs smart-table

尝试使用选择 ng-options 过滤表格但未成功。我有一个 plunker 来显示问题。谁能看到发生了什么?

http://plnkr.co/edit/WlojiFw26gqUoEDXOeQd?p=preview

我的选择:

<select class="form-control"
    st-search="code"
    st-input-event="change"
    st-delay="0"
    ng-model="selectedStatusFilter"
    ng-options="f.code as f.text for f in codeOptions">
</select>

我的选择:

$scope.codeOptions = [{
    'text': 'On',
    'code': 'On'
  }, {
    'text': 'Off',
    'code': 'Off'
  }, {
    'text': 'Cat',
    'code': 'Cat'
  }, {
    'text': 'All',
    'code': ''
  }]

收藏中的典型项目:

code : "On"
firstName : "Laurent"
id : 9
lastName : "Renard"

所以我希望发生的是,Select的值会作为对集合中项目的代码属性的过滤器进行混淆。因此,选择"On"时,只显示code : 'On'项,并选择All因为""的值,我们应该会看到所有项目。

  • 使用Angular版本1.6.4
  • 使用Smart-Table 2.1.8

2 个答案:

答案 0 :(得分:3)

作为替代方式,您可以使用ng-repeatng-model而不使用任何 <select class="form-control" st-search="code"> <option ng-repeat="f in codeOptions" ng-selected="codeOptions.indexOf(f) == 3" value="{{f.code}}">{{f.text}}</option> </select>

{{1}}

binary operators

答案 1 :(得分:1)

在智能过滤器文档中,有一种方法可以定义如何执行此操作,请参阅链接Smart Table Filtering,因此在此链接中,它告诉我们在智能表声明元素上使用属性st-set-filter 。另一件事是,在select using ng-options我们将获得select元素的ng-model中包含的数据类型,要删除它,您可以使用track by f.code,因此HTML更改为:

<section st-table="displayedCollection" st-safe-src="rowCollection" st-set-filter="myCustomFilter"> 
        <select class="form-control"
        st-search="code"
        st-input-event="change"
        st-delay="0"
        ng-model="selectedStatusFilter"
        ng-options="f.code as f.text for f in codeOptions track by f.code"></select>
        {{displayedCollection}}
        <table class="table table-striped">
          <thead>
            <tr>

JS包含从文档中获取的过滤器声明。

app.filter('myCustomFilter', function($filter){
    return function(input, predicate){
        console.log(input, predicate);
        return $filter('filter')(input, predicate, true);
    }
});

最后下面是相同的演示。

Plunkr Demo

如果您遇到任何问题,请与我们联系!