SELECTと入力値に基づくフィルタ

Question

[OK]を、私は何かが不足しています。基本的に私はグリッドを持っています。それは、検索/フィルタバーである上記（私はすべてのデータを横断検索できるように、しかし、私はまた、彼らは、データセット内の特定の列に検索入力をターゲット取得しようとしている。

<label>Search: </label> 
<input id='searchTerm' ng-model='searchTerm'/> 
<label>Filter: </label> 
<select id='filterKey'ng-model="filterList"> 
<option value='$'>ALL</option> 
<option ng-repeat='dKey in dataKeys' value='{{dKey}}'>{{dKey}}</option> 
</select> 

すべてのデータが移入んドロップダウンフィルタおよびグリッドの...だから、選択ボックスがALLに設定されている場合

LastName, FirstName, Age, Roles, Status Last1 First1 23 Mgt Retired Last2 First2 24 Mgt Retired Last3 First3 24 Mgt Retired Last3 First4 22 Mgt Retired Last5 First5 25 Mgt Retired

は、いくつかのそれは単に検索入力（検索に入力されたものにマッチしてアルlthe行を表示します「Last3」が返されます。

LastName, FirstName, Age, Roles, Status Last3 First3 24 Mgt Retired Last3 First4 22 Mgt Retired

しかし、「年齢」はfitlerドロップダウンから選択されたと24は、検索入力に入力された、あなたが取得したい場合：

LastName, FirstName, Age, Roles, Status Last2 First2 24 Mgt Retired Last3 First3 24 Mgt Retired

そして「Last2は」に入力された場合フィルタが、検索入力がよ「年齢」を設定して、あなたが取得したい：私はそれが私がstugglingてるシンプルBTUだと確信してい

LastName, FirstName, Age, Roles, Status

。上記のコードをいくつか残しておきますが、私に知らせて訂正します。グリッドに値が入力され、検索入力が機能します。検索入力を特定の列でのみ表示する方法を見つけることはできません。
たとえば、24歳の人を探していて、現在電話番号のように "24"のデータが見つかった場合、あなたのオブジェクトのプロパティlastNameでの検索に

Answer 1

、フィルタは、だから、

{ 
    lastName: 'foo' 
} 

ことが選択されたキーを持つオブジェクトを返しますあなたのコントローラ内の関数、および入力された値を作成し、使用する必要があります。

$scope.getFilter = function() { 
    var result = {}; 
    result[$scope.filterList] = $scope.searchTerm; 
    return result; 
} 

ビューで：

ng-repeat="list | filter:getFilter()" 

フィルタとしてこの関数の結果3210

filterListの名前をfilterKeyのような意味に変更してください。

Answer 2

ここにあなたが使用できるものがあります。私は選択ボックスに列名を累積しました。値が選択されたときにその特定のフィルタで検索するカスタムフィルタを作成しました。 'ALL'が選択されている場合は、すべての列を検索しています。それが役に立てば幸い。

var app = angular.module('appX', []); 
 

 
app.controller('ctrlX', function($scope) { 
 
    $scope.dataSet = [{ 
 
    firstname: 'first 1', 
 
    lastname: 'last 1', 
 
    age: '24', 
 
    sex: 'F' 
 
    }, { 
 
    firstname: 'first 2', 
 
    lastname: 'last 2', 
 
    age: '21', 
 
    sex: 'M' 
 
    }, { 
 
    firstname: 'first 3', 
 
    lastname: 'last 3', 
 
    age: '24', 
 
    sex: 'M' 
 
    }, { 
 
    firstname: 'first 4', 
 
    lastname: 'last 4', 
 
    age: '26', 
 
    sex: 'F' 
 
    }]; 
 

 
    $scope.keyList = []; 
 
    angular.forEach($scope.dataSet, function(val, key) { 
 
    angular.forEach(val, function(v, k) { 
 
     if ($scope.keyList.indexOf(k) < 0) { 
 
     $scope.keyList.push(k); 
 
     } 
 
    }) 
 
    }) 
 
}) 
 

 
app.filter('mycustomSearch', function() { 
 
    return function(input, option) { 
 
    if (!option.type || !option.term) { 
 
     return input; 
 
    } 
 
    var result = []; 
 
    angular.forEach(input, function(val, key) { 
 
     if (val[option.type].indexOf(option.term) > -1) { 
 
     result.push(val); 
 
     } 
 
    }) 
 
    return result; 
 
    } 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="appX"> 
 
    <div ng-controller="ctrlX"> 
 
    <label>Search:</label> 
 
    <input id='searchTerm' ng-model='searchTerm' /> 
 
    <label>Filter:</label> 
 
    <select id='filterKey' ng-model="filterList" ng-options="x for x in keyList"> 
 
     <option value=''>ALL</option> 
 
    </select> 
 
    <div> 
 
     <table> 
 
     <thead> 
 
      <tr> 
 
      <th ng-repeat="x in keyList">{{x}}</th> 
 
      </tr> 
 
     </thead> 
 
     <tbody> 
 
      <tr ng-repeat="x in dataSet | mycustomSearch:{term:searchTerm, type:filterList} | filter: searchTerm"> 
 
      <td>{{x.firstname}}</td> 
 
      <td>{{x.lastname}}</td> 
 
      <td>{{x.age}}</td> 
 
      <td>{{x.sex}}</td> 
 
      </tr> 
 
     </tbody> 
 
     </table> 
 
    </div> 
 
    </div> 
 
</div>