1

先日、angular.jsで遊んでいましたが、angular.jsが提供するこのフィルター関数を見つけました。

<div class="container-fluid">
  <div class="row-fluid">
    <div class="span2">
      <!--Sidebar content-->

      Search: <input ng-model="query">

    </div>
    <div class="span10">
      <!--Body content-->

      <ul class="phones">
        <li ng-repeat="phone in phones | filter:query">
          {{phone.name}}
          <p>{{phone.snippet}}</p>
        </li>
      </ul>

    </div>
  </div>
</div>

私の質問は次のとおりです。事前に作成されたhtml要素にangular.jsフィルターを使用できますか？

<div class="container-fluid">
  <div class="row-fluid">
    <div class="span2">
      <!--Sidebar content-->

      Search: <input ng-model="query">

    </div>
    <div class="span10">
      <!--Body content-->

      <ul class="phones" ng-filter:query>
        <li>First element</li>
        <li>Second elementy/li>
        <li>Third element</li>
      </ul>

    </div>
  </div>
</div>

ご回答ありがとうございます！

4

3 に答える 3

2

この種のDOM操作/フィルタリングには、通常、AngularディレクティブngSwitchまたはngShow / ngHideが使用されます。

<ul class="phones" ng-switch on="query">
<li ng-switch-when="Nexus S">First element</li>

上記は完全に一致するものを探します（したがって、@ toshのディレクティブほど良くはありません）。ng-switchは、選択ドロップダウンとともに使用されることが多く、可能な値は固定/既知です。

ngShow / ngHideは、おそらくあなたがやろうとしていることにもっとよくマッチします。インライン式または$scope関数を使用して、要素を表示するかどうかを決定できます。

<li ngShow="some expression using query">First element</li>
<li ngShow="myFilter()">First element</li>

function MyCtrl($scope) {
    $scope.myFilter = function() {
       if($scope.query ...) {  // could use RegExp() here like @tosh
          return true
       }
       return false
    }

上記はjQueryを必要としません。

于 2012-10-22T16:29:37.353 に答える
2

いいえ。最初の例では、「フィルター」と呼ばれるフィルターを使用しています。フィルタは、Angularバインディング式の一部を形成できます。パイプ文字の後に配置され、パイプの前にある式の部分に「フィルター関数」を適用します。一部のフィルターは、コロンの右側にある追加のパラメーターも取ります。「フィルター」と呼ばれるフィルターは、配列（パイプの前の部分、この場合は電話）に作用し、コロンの右側のパラメーターによって決定されたチェックを通過します。あなたの場合、queryという文字列変数を使用して、queryに文字列を含む電話からのアイテムを含む配列を返します。

Angularのフィルターの他の例には、通貨、日付、大文字、orderByが含まれます。それらはすべて、別の値（たとえば、文字列の大文字バージョン）と、場合によっては追加の構成パラメーター（日付や通貨の形式、注文するフィールドなど）を返す入力（たとえば、文字列）を受け取ります。ただし、これらは「データモデル」の値である入力でのみ機能し、DOMノードのコンテンツでは直接機能しません。

2番目の例では、 「ngFilter」というディレクティブを使用しようとしています。ディレクティブは標準のHTML構文の拡張であり、ハイフンでつながれた属性（この場合のように）、データ属性（data-ng-filter）、名前空間属性（ng：filter）、cssクラスなどとして表現できます。Angularのデフォルトディレクティブの接頭辞は「ng」です。しかし、Angularには「ngFilter」のようなディレクティブはありません。例は正常にロードされますが、この存在しないディレクティブを追加してもDOM処理に影響はありません。

于 2012-10-22T11:52:35.713 に答える
1

これはデフォルトのディレクティブの一部ではないと思いますが、それは興味深い作業です。

カスタムディレクティブを使用して実装しようとしました。 http://plnkr.co/edit/TOGbtq

app.directive('ngFilter', function() {
  return {
    link: function(scope, element, attr) {
      scope.$watch(attr.ngFilter, function(q){
        $(element).children().each(function(i,a){
          $(a).toggle((new RegExp(q)).test($(a).text()));
        });
      });
    }
  };
});
于 2012-10-22T11:50:14.257 に答える