Polymer 中是否有或多或少等同于 AngularJS“过滤器”功能的东西?我研究了模板绑定(bind),但找不到一种方法来根据输入字段的值过滤我的表...
<input value="{{ID}}">
<table [==> some Polymer magic here involving {{ID}}]>
<tr>
<th>ID</th>
<th>VALUE</th>
</tr>
<tr>
<td>FOO</td>
<td>1</td>
</tr>
<tr>
<td>BOO</td>
<td>2</td>
</tr>
<tr>
<td>FAA</td>
<td>3</td>
</tr>
<tr>
<td>BAA</td>
<td>4</td>
</tr>
</table>
然后在输入字段中键入“F”将使表格仅显示值等于 1 和 3 的行,继续输入“O”将只显示“1”...
最佳答案
(今天)执行此操作的最佳方法是从过滤后的数据模型生成表格,并使用 Polymer on-*
keyup 处理程序对输入上的按键使用react
<polymer-element name="my-element">
<template>
<input type="text" on-keyup="{{filter}}">
<table>
<tr><th>ID</th><th>VALUE</th></tr>
<template repeat="{{d in filteredData}}">
<tr><td>{{d[0]}}</td><td>{{d[1]}}</td></tr>
</template>
</table>
</template>
<script>
Polymer('my-element', {
created: function() {
this.data = [
['FOO', 1], ['BOO', 2], ['FAA', 3], ['BAA', 4]
]
this.filteredData = this.data;
},
filter: function(e, detail, sender) {
// Tests for anywhere in the string. Modify to match just the beginning.
var regex = new RegExp(sender.value, 'i');
this.filteredData = this.data.filter(function(d, idx, array) {
return regex.test(d[0]);
});
}
});
</script>
</polymer-element>
<my-element></my-element>
关于data-binding - 使用 Polymer 根据输入值过滤表格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18828223/