3

AngularJS の「フィルター」機能と多かれ少なかれ同等のものは Polymer にありますか? テンプレートバインディングを調べましたが、入力フィールドの値に基づいてテーブルをフィルタリングする方法が見つかりませんでした...

<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」のみが表示されたままになります...

4

1 に答える 1

5

これを行う最善の方法 (今日) は、フィルター処理されたデータ モデルからテーブルを生成し、キーon-*アップ用の Polymer ハンドラーを使用して入力のキー押下に反応することです。

<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>

デモ: http://jsbin.com/parive/2/edit?html,output

将来的には、式のフィルター関数に対するファースト クラスのサポートを追加する予定です。1と2を参照してください。

于 2013-09-16T15:52:22.803 に答える