尝试使用选择和ng选项过滤表,但不成功。我有一个显示问题的 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
- 使用智能表 2.1.8
作为替代方法,您可以使用<option>
和ng-repeat
,而无需任何ng-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>
演示普伦克
在智能过滤器文档中,定义了一种方法来执行此操作,请参阅链接智能表过滤,因此在此链接中,它告诉我们在智能表声明元素上使用属性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);
}
});
最后,下面是一个相同的演示。
普伦克演示
如果您遇到任何问题,请告诉我!