无法使用智能表中的选择过滤

尝试使用选择和ng选项但未成功。我有一个活塞显示问题。任何人都可以看到正在发生的事情？无法使用智能表中的选择过滤

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"

所以我希望发生的是，选择的值获取interperated作为集合中的项目的代码属性的过滤器。因此，当选择"On"时，仅显示code : 'On'的项目，并选择All，因为值为""，因此我们应该看到所有项目。

采用了棱角分明的版本1.6.4
使用智能表2.1.8

来源

2017-10-20 Ingó Vals

作为替代方式，可以使用<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>

Demo Plunker

来源

2017-10-20 17:00:49

这个工作原理除了最初没有对过滤器进行评估。直到我们改变选择后才会发生任何事情。尝试将所选的初始选项更改为索引0.请注意，它仍会显示所有内容，直到我们更改下拉列表。任何想法为什么？ –

使用'ng-attr-value =“f.code”' – svarog

在智能过滤器文件有关于如何做到这一点，请参阅链接Smart Table Filtering定义的方式，因此，在此链接中它告诉我们在智能表声明元素上使用属性st-set-filter。另一件事是，在select using ng-options我们将获得包含在选择元素的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包含取自一个filter声明文档。

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

最后，下面是一个相同的演示。

Plunkr Demo

请让我知道，如果你面对的任何问题！

来源

2017-10-20 16:45:34

这个工程除了过滤器不进行初步评价。直到我们改变选择后才会发生任何事情。 '$ scope.selectedStatusFilter = $ scope.codeOptions [0];'但它仍然显示一切。 –

无法使用智能表中的选择过滤

回答

相关问题