2

私の問題を示すためにjsfiddleを作成しました。最初の部分は部分的に機能しています。行番号 15 を参照してください。手動で述語をフィルターに入れ (述語は l_name)、動作しています。テーブルは姓の列でフィルタリングされます。

<tr ng-repeat="item in items | filter:{l_name:myInput}">

サンプルの 2 番目の部分は、select (mySelect2 という名前のモデル) を使用してフィルター処理する述語を選択すると機能しません (行番号 36 を参照)。

私がやろうとしているのは、選択を使用して述語で列を選択し、その列でフィルターする入力を使用することです。

<tr ng-repeat="item in items | filter:{mySelect2:myInput2}">

何か不足していますか、それとも選択 (mySelect2) のバインディングでテーブルのフィルターを更新する必要がありますか?

助けてくれてありがとう！

PS: 入力に jo と入力します。

4

3 に答える 3

4

ここにいくつかのオプションのフィドルがあります：http://jsfiddle.net/jgoemat/tgKkD/1/

オプション 1 - 複数のフィールドで検索する

モデルのオブジェクト (ここでは「検索」) をフィルターとして使用し、l_name と f_name の個別の入力ボックスを使用できます。これにより、どちらかをフィルタリングするだけでなく、両方をフィルタリングできます。

any: <input ng-model="search.$"/><br/>
l_name: <input ng-model="search.l_name"/><br/>
f_name: <input ng-model="search.f_name"/><br/>
<!-- skipping code -->
<tr ng-repeat="item in items|filter:search">

オプション 2 - コントローラーの機能を使用する

組み込みフィルターは、オブジェクトを含める必要がある場合に true を返す関数を引数として取ることができます。この関数は、フィルタリングするオブジェクトを唯一の引数として取り、含める必要がある場合は true を返します。HTML:

<tr ng-repeat="item in items|filter:filterFunc">

コントローラ機能:

$scope.filterFunc = function(obj) {
    // property not specified do we want to filter all instead of skipping filter?
    if (!$scope.mySelect)
        return obj;

    if (obj[$scope.mySelect].toLowerCase().indexOf($scope.myInput.toLowerCase()) >= 0)
        return obj;
    return false;
};

オプション 3 - カスタム フィルターを作成する

このフィルター関数は、リスト全体を引数として受け取り、フィルター処理されたリストを返します。これには、Angular モジュールを作成し、 Htmlのng-appようなタグで指定する必要があります。ng-app="MyApp"

<tr ng-repeat="item in items|MyFilter:mySelect:myInput">

コード：

var app = angular.module('MyApp', []);
app.filter('MyFilter', function() {
    return function(list, propertyName, value) {
        console.log('MyFilter(list, ', propertyName, ', ', value, ')');
        // property not specified do we want to filter all instead of skipping filter?
        if (!propertyName)
            return list;

        var newList = [];
        var lower = value.toLowerCase();
        angular.forEach(list, function(v) {
            if (v[propertyName].toLowerCase().indexOf(lower) >= 0)
                newList.push(v);
        });
        return newList;
    }
});

オプション 4: ng-show

組み込みのfilterフィルター式では式を使用できませんが、ng-show次のように表示項目を制限できます。

<tr ng-show="item[mySelect].toLowerCase().indexOf(myInput.toLowerCase()) >= 0 || !mySelect" ng-repeat="item in items">

オプション 1 は簡単で柔軟だと思います。ドロップダウン + フィールド UI を好む場合は、オプション 3 が最も便利だと思います。次のように、他のアプリで依存関係として再利用できます。

var app = angular.module("NewApp", ["MyApp"]);

「filterByNamedProperty」のような名前を付けるだけです。オプション 2 は簡単ですが、コントローラーに関連付けられています。オプション 4 は面倒なので、私は使いません。

于 2013-06-09T06:46:26.770 に答える
0

フィルタにスコープ変数を渡すことができます:

<tr ng-repeat="item in items | filter:myScopeVariable">

これは、コントローラーでフィルター オブジェクトを定義することができ、それがフィルターによって使用されることを意味します。

$scope.$watch('mySelect2', function(val){
  $scope.myScopeVariable = {};
  $scope.myScopeVariable[val] = $scope.myInput2;
});

$scope.$watch('myInput2', function(val){
  $scope.myScopeVariable = {};
  $scope.myScopeVariable[$scope.mySelect2] = $scope.myInput2;
});

デモフィドル

于 2013-06-09T04:58:34.157 に答える
0

カスタムフィルターの使用についてはどうですか? ユーザーは、プロパティと条件を連結します (例: last:jo)。フィルターでは、コロンで分割し、最初の部分をプロパティ名として使用し、2 番目の部分を条件として使用します。

于 2013-06-09T04:04:51.290 に答える