angularjs - AngularJS での複数の特定のモデルプロパティによるフィルタリング (OR 関係)

Question

ここで例を見てみましょう: http://docs.angularjs.org/api/ng.filter:filter

を使用して任意の電話プロパティで検索できます。また、<input ng-model="search">を使用して名前だけで検索することもできます<input ng-model="search.name">。結果は名前で適切にフィルター処理されます (電話番号を入力しても、期待どおりに結果が返されません)。

「name」プロパティ、「phone」プロパティ、および「secret」プロパティを持つモデルがあるとします。「secret」プロパティではなく、「name」プロパティと「phone」プロパティの両方でフィルタリングするにはどうすればよいでしょうか。 ? したがって、本質的に、ユーザーは名前または電話番号を入力でき、正しくフィルタリングされますが、ユーザーが「秘密の」値の一部と等しい値を入力したとしても、何も返されません。ng-repeat

ありがとう。

score 172 · Accepted Answer

プランカーはこちら

よりクリーンなコードを備えた新しい plunker と、クエリと検索のリスト項目の両方で大文字と小文字が区別されない

主なアイデアは、この目的を達成するためのフィルター関数を作成することです。

公式ドキュメントより

function: 述語関数を使用して、任意のフィルターを作成できます。この関数は、配列の各要素に対して呼び出されます。最終的な結果は、述語が true を返した要素の配列です。

<input ng-model="query">

<tr ng-repeat="smartphone in smartphones | filter: search ">

$scope.search = function(item) {
    if (!$scope.query || (item.brand.toLowerCase().indexOf($scope.query) != -1) || (item.model.toLowerCase().indexOf($scope.query.toLowerCase()) != -1) ){
        return true;
    }
    return false;
};

アップデート

実世界でのパフォーマンスに懸念を抱く人もいるかもしれませんが、それは正しいことです。

現実の世界では、おそらくコントローラーからこのようなフィルターを実行するでしょう。

これは、その方法を示す詳細な投稿です。

つまり、ng-change新しい検索の変更を監視するために入力に追加します

次に、フィルター機能をトリガーします。

score 80 · Accepted Answer

API リファレンスで説明されているように、オブジェクトをパラメーターとしてフィルター式に渡すことができます。このオブジェクトは、次のように、関心のあるプロパティを選択的に適用できます。

<input ng-model="search.name">
<input ng-model="search.phone">
<input ng-model="search.secret">
<tr ng-repeat="user in users | filter:{name: search.name, phone: search.phone}">

プランカーはこちら

注意してください...この例は AngularJS 1.1.5 でうまく機能しますが、1.0.7 では常にうまく機能するとは限りません。この例では、1.0.7 はすべてを除外して初期化し、入力の使用を開始すると機能します。入力が空白で始まる場合でも、入力に一致しない値があるように動作します。安定したリリースを維持したい場合は、状況に応じてこれを試してみてください。ただし、1.2.0 がリリースされるまで @maxisam のソリューションを使用するシナリオもあります。

score 5 · Accepted Answer

私は@maxisamの答えからインスピレーションを得て、独自のソート機能を作成しました。共有したいと思います（退屈なので）。

状況車の配列をフィルタリングしたい。フィルタリングするために選択されたプロパティは、名前、年、価格、km です。物件価格と km は数字です (したがってを使用します.toString)。大文字も制御したい（したがって.toLowerCase）。また、フィルタークエリを別の単語に分割できるようにしたいと考えています (たとえば、フィルター 2006 Acura を指定すると、2006 が年で、Acura が名前で一致します)。

フィルターに渡す関数

        var attrs = [car.name.toLowerCase(), car.year, car.price.toString(), car.km.toString()],
            filters = $scope.tableOpts.filter.toLowerCase().split(' '),
            isStringInArray = function (string, array){
                for (var j=0;j<array.length;j++){
                    if (array[j].indexOf(string)!==-1){return true;}
                }
                return false;
            };

        for (var i=0;i<filters.length;i++){
            if (!isStringInArray(filters[i], attrs)){return false;}
        }
        return true;
    };

score 3 · Accepted Answer

この回答がお役に立てば幸いです、複数値フィルター

そして、このフィドルの実例

arrayOfObjectswithKeys | filterMultiple:{key1:['value1','value2','value3',...etc],key2:'value4',key3:[value5,value6,...etc]}

score 2 · Accepted Answer

ここにはたくさんの良い解決策がありますが、これで他のルートに行くことをお勧めします。検索が最も重要で、'secret' プロパティがビューでまったく使用されていない場合。これに対する私のアプローチは、組み込みの角度フィルターをそのすべての利点とともに使用し、モデルをオブジェクトの新しい配列に単純にマップすることです。

質問の例:

$scope.people = members.map(function(member) { 
                              return { 
                                name: member.name, 
                                phone: member.phone
                              }});

ここで、html で通常のフィルターを使用して、これらの両方のプロパティを検索します。

<div ng-repeat="member in people | filter: searchString">

score 1 · Accepted Answer

http://plnkr.co/edit/A2IG03FLYnEYMpZ5RxEm?p=preview

これは、大文字と小文字を区別する検索であり、検索を単語に分割して、各モデルでも検索します。スペースが見つかった場合にのみ、クエリを配列に分割し、各単語を検索しようとします。

すべての単語がモデルの少なくとも 1 つにある場合、true を返します。

$scope.songSearch = function (row) {
    var query = angular.lowercase($scope.query);
    if (query.indexOf(" ") > 0) {
        query_array = query.split(" ");
        search_result = false;
        for (x in query_array) {
            query = query_array[x];
            if (angular.lowercase(row.model1).indexOf(query || '') !== -1 || angular.lowercase(row.model2).indexOf(query || '') !== -1 || angular.lowercase(row.model3).indexOf(query || '') !== -1){
                search_result = true;
            } else {
                search_result = false;
                break;
            }
        }
        return search_result;
    } else {
        return (angular.lowercase(row.model1).indexOf(query || '') !== -1 || angular.lowercase(row.model2).indexOf(query || '') !== -1 || angular.lowercase(row.model3).indexOf(query || '') !== -1);
    }
};

score 0 · Accepted Answer

可能な限りシンプルに保つのが好きです。International でグループ化し、すべての列をフィルター処理し、各グループの数を表示し、アイテムが存在しない場合はグループを非表示にする必要がありました。

さらに、このような単純なもののためだけにカスタムフィルターを追加したくありませんでした。

        <tbody>
            <tr ng-show="fusa.length > 0"><td colspan="8"><h3>USA ({{fusa.length}})</h3></td></tr>
            <tr ng-repeat="t in fusa = (usa = (vm.assignmentLookups | filter: {isInternational: false}) | filter: vm.searchResultText)">
                <td>{{$index + 1}}</td>
                <td ng-bind-html="vm.highlight(t.title, vm.searchResultText)"></td>
                <td ng-bind-html="vm.highlight(t.genericName, vm.searchResultText)"></td>
                <td ng-bind-html="vm.highlight(t.mechanismsOfAction, vm.searchResultText)"></td>
                <td ng-bind-html="vm.highlight(t.diseaseStateIndication, vm.searchResultText)"></td>
                <td ng-bind-html="vm.highlight(t.assignedTo, vm.searchResultText)"></td>
                <td ng-bind-html="t.lastPublished | date:'medium'"></td>
            </tr>
        </tbody>
        <tbody>
            <tr ng-show="fint.length > 0"><td colspan="8"><h3>International ({{fint.length}})</h3></td></tr>
            <tr ng-repeat="t in fint = (int = (vm.assignmentLookups | filter: {isInternational: true}) | filter: vm.searchResultText)">
                <td>{{$index + 1}}</td>
                <td ng-bind-html="vm.highlight(t.title, vm.searchResultText)"></td>
                <td ng-bind-html="vm.highlight(t.genericName, vm.searchResultText)"></td>
                <td ng-bind-html="vm.highlight(t.mechanismsOfAction, vm.searchResultText)"></td>
                <td ng-bind-html="vm.highlight(t.diseaseStateIndication, vm.searchResultText)"></td>
                <td ng-bind-html="vm.highlight(t.assignedTo, vm.searchResultText)"></td>
                <td ng-bind-html="t.lastPublished | date:'medium'"></td>
            </tr>
        </tbody>

angularjs - AngularJS での複数の特定のモデル プロパティによるフィルタリング (OR 関係)

13 に答える 13

Related

Reference

angularjs - AngularJS での複数の特定のモデルプロパティによるフィルタリング (OR 関係)