0

ngRepeat を使用して、表示された結果をテーブル内でフィルター処理するフィルターが必要です。ユーザー入力に基づいてこれらの結果をフィルター処理したいと考えています。

この時点で、私は次のようなことをしています：

//HTML
<input type="search" ng-model="search">

<table>
  <tr ng-repeat="person in clients | filter: searchFilter">
    <td><input type="text" ng-model="person.Vorname"></td>            
  </tr>
</table>

コントローラー/フィルター機能:

app.controller('MyCtrl',function($scope){
  $scope.searchFilter = function (obj) {
    var re = new RegExp($scope.search, 'i');
    return !$scope.search || re.test(obj.Vorname) || re.test(obj.Firma);
  };
});

すべてがうまく機能します。ただし、これを正しい方法で行っているかどうかはわかりません。

標準に準拠するために、フィルター関数を実際の angular.filter に移動する必要がありますか?

もしそうなら、入力要素からフィルターに値を渡すにはどうすればよいですか? スコープ自体を渡すことができることは承知していますが、これはどういうわけか間違っているか、スコープに依存しすぎているようです。

ここに行く方法は何ですか？

4

1 に答える 1

1

標準に準拠するために、フィルター関数を実際の angular.filter に移動する必要がありますか?

そうです、フィルターをユーティリティとして使用するより良い方法です (シングルトンをサービス、プロバイダー、ファクトリーとして使用するなど)。

フィルターは使用せず$scope、入力に基づいて出力を作成するため、次のようにフィルターを記述できます。

app.filter('myfilter', function() {
   return function( items, types) {
    var filtered = [];

    angular.forEach(items, function(item) {
       // <some conditions>
          filtered.push(item);  // dummy usage, returns the same object         
        }
    });

    return filtered;
  };
});

Fiddleデモから取得

参考までに

angularシードでcodeigniterフレームワークを使用すると、次の名前の別のファイルを使用していることがわかります。

filters.js      --> custom angular filters

プロジェクト構造は次のようになります。

app/                --> all of the files to be used in production
  css/              --> css files
    app.css         --> default stylesheet
  img/              --> image files
  index.html        --> app layout file (the main html template file of the app)
  index-async.html  --> just like index.html, but loads js files asynchronously
  js/               --> javascript files
    app.js          --> application
    controllers.js  --> application controllers
    directives.js   --> application directives
    filters.js      --> custom angular filters
    services.js     --> custom angular services
  lib/              --> angular and 3rd party javascript libraries
    angular/
      angular.js        --> the latest angular js
      angular.min.js    --> the latest minified angular js
      angular-*.js      --> angular add-on modules
      version.txt       --> version number
  partials/             --> angular view partials (partial html templates)
    partial1.html
    partial2.html
于 2013-11-14T07:42:16.693 に答える