angularJS에서 여러 값을 필터링하는 방법 (또는 연산)
filter
각도 를 사용하고 여러 값을 필터링하고 싶습니다. 값 중 하나가 있으면 표시해야합니다.
예를 들어이 구조가 있습니다.
객체는 movie
속성을 가지고있는 genres
난에 대한 필터링 할 Action
및 Comedy
.
할 수는 filter:({genres: 'Action'} || {genres: 'Comedy'})
있지만 동적으로 필터링하려면 어떻게해야합니까? 예 :filter: variableX
필터링해야하는 장르 배열이있는 경우 variableX
에서 어떻게 설정 $scope
합니까?
나는 그것을 문자열로 구성 한 다음 할 수 eval()
있지만 eval ()을 사용하고 싶지 않습니다 ...
그냥 사용자 정의 필터를 만들 것입니다. 그들은 그렇게 어렵지 않습니다.
angular.module('myFilters', []).
filter('bygenre', function() {
return function(movies,genres) {
var out = [];
// Filter logic here, adding matches to the out var.
return out;
}
});
주형:
<h1>Movies</h1>
<div ng-init="movies = [
{title:'Man on the Moon', genre:'action'},
{title:'Meet the Robinsons', genre:'family'},
{title:'Sphere', genre:'action'}
];" />
<input type="checkbox" ng-model="genrefilters.action" />Action
<br />
<input type="checkbox" ng-model="genrefilters.family" />Family
<br />{{genrefilters.action}}::{{genrefilters.family}}
<ul>
<li ng-repeat="movie in movies | bygenre:genrefilters">{{movie.title}}: {{movie.genre}}</li>
</ul>
링크 편집 : 각도 필터 만들기
업데이트 : 여기 내 제안에 대한 정확한 데모 가있는 바이올린 이 있습니다.
컨트롤러 기능을 사용하여 필터링 할 수 있습니다.
function MoviesCtrl($scope) {
$scope.movies = [{name:'Shrek', genre:'Comedy'},
{name:'Die Hard', genre:'Action'},
{name:'The Godfather', genre:'Drama'}];
$scope.selectedGenres = ['Action','Drama'];
$scope.filterByGenres = function(movie) {
return ($scope.selectedGenres.indexOf(movie.genre) !== -1);
};
}
HTML :
<div ng-controller="MoviesCtrl">
<ul>
<li ng-repeat="movie in movies | filter:filterByGenres">
{{ movie.name }} {{ movie.genre }}
</li>
</ul>
</div>
다음과 같이 배수 값이있는 경우 사용자 정의 필터를 만드는 것은 너무 과도 할 수 있습니다. 사용자 정의 비교기를 전달하면됩니다.
$scope.selectedGenres = "Action, Drama";
$scope.containsComparator = function(expected, actual){
return actual.indexOf(expected) > -1;
};
그런 다음 필터에서 :
filter:{name:selectedGenres}:containsComparator
다음은 값 배열을 사용하여 데이터를 필터링하는 사용자 지정 필터의 구현입니다. 배열 및 단일 키 값을 가진 여러 키 개체를 지원합니다. inangularJS API에서 언급했듯이 AngularJS 필터 Doc 은 단일 값으로 다중 키 필터를 지원하지만 아래의 사용자 정의 필터는 angularJS와 동일한 기능을 지원하며 값의 배열과 배열 및 단일 키의 조합을 지원합니다. 아래의 코드 스 니펫을 찾으십시오.
myApp.filter('filterMultiple',['$filter',function ($filter) {
return function (items, keyObj) {
var filterObj = {
data:items,
filteredData:[],
applyFilter : function(obj,key){
var fData = [];
if (this.filteredData.length == 0)
this.filteredData = this.data;
if (obj){
var fObj = {};
if (!angular.isArray(obj)){
fObj[key] = obj;
fData = fData.concat($filter('filter')(this.filteredData,fObj));
} else if (angular.isArray(obj)){
if (obj.length > 0){
for (var i=0;i<obj.length;i++){
if (angular.isDefined(obj[i])){
fObj[key] = obj[i];
fData = fData.concat($filter('filter')(this.filteredData,fObj));
}
}
}
}
if (fData.length > 0){
this.filteredData = fData;
}
}
}
};
if (keyObj){
angular.forEach(keyObj,function(obj,key){
filterObj.applyFilter(obj,key);
});
}
return filterObj.filteredData;
}
}]);
용법:
arrayOfObjectswithKeys | filterMultiple:{key1:['value1','value2','value3',...etc],key2:'value4',key3:[value5,value6,...etc]}
위의 "filterMutiple" 사용자 정의 필터 를 구현 한 바이올린 예제입니다 . ::: 바이올린 예 :::
객체 배열을 필터링하려면 다음을 제공 할 수 있습니다
filter:({genres: 'Action', key :value }.
개별 속성은 해당 속성에 지정된 특정 필터로 필터링됩니다.
그러나 개별 속성별로 필터링하고 모든 속성을 전체적으로 필터링하려면 다음과 같이하십시오.
<tr ng-repeat="supp in $data | filter : filterObject | filter : search">
~ 아툴
나는 그것에 시간을 보냈고 @ chrismarx 덕분에 angular의 기본값으로 filterFilter
자신의 비교기를 전달할 수 있음을 알았습니다 . 여러 값에 대한 편집 된 비교기는 다음과 같습니다.
function hasCustomToString(obj) {
return angular.isFunction(obj.toString) && obj.toString !== Object.prototype.toString;
}
var comparator = function (actual, expected) {
if (angular.isUndefined(actual)) {
// No substring matching against `undefined`
return false;
}
if ((actual === null) || (expected === null)) {
// No substring matching against `null`; only match against `null`
return actual === expected;
}
// I edited this to check if not array
if ((angular.isObject(expected) && !angular.isArray(expected)) || (angular.isObject(actual) && !hasCustomToString(actual))) {
// Should not compare primitives against objects, unless they have custom `toString` method
return false;
}
// This is where magic happens
actual = angular.lowercase('' + actual);
if (angular.isArray(expected)) {
var match = false;
expected.forEach(function (e) {
e = angular.lowercase('' + e);
if (actual.indexOf(e) !== -1) {
match = true;
}
});
return match;
} else {
expected = angular.lowercase('' + expected);
return actual.indexOf(expected) !== -1;
}
};
그리고 DRY를위한 커스텀 필터를 만들고 싶다면 :
angular.module('myApp')
.filter('filterWithOr', function ($filter) {
var comparator = function (actual, expected) {
if (angular.isUndefined(actual)) {
// No substring matching against `undefined`
return false;
}
if ((actual === null) || (expected === null)) {
// No substring matching against `null`; only match against `null`
return actual === expected;
}
if ((angular.isObject(expected) && !angular.isArray(expected)) || (angular.isObject(actual) && !hasCustomToString(actual))) {
// Should not compare primitives against objects, unless they have custom `toString` method
return false;
}
console.log('ACTUAL EXPECTED')
console.log(actual)
console.log(expected)
actual = angular.lowercase('' + actual);
if (angular.isArray(expected)) {
var match = false;
expected.forEach(function (e) {
console.log('forEach')
console.log(e)
e = angular.lowercase('' + e);
if (actual.indexOf(e) !== -1) {
match = true;
}
});
return match;
} else {
expected = angular.lowercase('' + expected);
return actual.indexOf(expected) !== -1;
}
};
return function (array, expression) {
return $filter('filter')(array, expression, comparator);
};
});
그런 다음 원하는 곳 어디에서나 사용할 수 있습니다.
$scope.list=[
{name:'Jack Bauer'},
{name:'Chuck Norris'},
{name:'Superman'},
{name:'Batman'},
{name:'Spiderman'},
{name:'Hulk'}
];
<ul>
<li ng-repeat="item in list | filterWithOr:{name:['Jack','Chuck']}">
{{item.name}}
</li>
</ul>
마지막으로 plunkr이 있습니다.
참고 : 예상 배열에는 String , Number 등과 같은 간단한 객체 만 포함해야합니다 .
angular.filter의 searchField 필터를 사용할 수 있습니다
JS :
$scope.users = [
{ first_name: 'Sharon', last_name: 'Melendez' },
{ first_name: 'Edmundo', last_name: 'Hepler' },
{ first_name: 'Marsha', last_name: 'Letourneau' }
];
HTML :
<input ng-model="search" placeholder="search by full name"/>
<th ng-repeat="user in users | searchField: 'first_name': 'last_name' | filter: search">
{{ user.first_name }} {{ user.last_name }}
</th>
<!-- so now you can search by full name -->
ngIf
상황이 허용 하는 경우 에도 사용할 수 있습니다 .
<div ng-repeat="p in [
{ name: 'Justin' },
{ name: 'Jimi' },
{ name: 'Bob' }
]" ng-if="['Jimi', 'Bob'].indexOf(e.name) > -1">
{{ p.name }} is cool
</div>
내가 찾은 가장 빠른 해결책 은 예를 들어 angular-filter 의 filterBy
필터 를 사용하는 것입니다 .
<input type="text" placeholder="Search by name or genre" ng-model="ctrl.search"/>
<ul>
<li ng-repeat="movie in ctrl.movies | filterBy: ['name', 'genre']: ctrl.search">
{{movie.name}} ({{movie.genre}}) - {{movie.rating}}
</li>
</ul>
은 거꾸로이다 각도-필터 가 미세 종속성으로 프로젝트에 추가해야한다, 그래서 여전히 적극적으로 개발하고 유지 상당히 인기있는 라이브러리 (GitHub의에 ~ 2.6k의 별)입니다.
나는 이것이 당신이 찾고있는 것이라고 믿습니다.
<div>{{ (collection | fitler1:args) + (collection | filter2:args) }}</div>
이것을 시도하십시오
var m = angular.module('yourModuleName');
m.filter('advancefilter', ['$filter', function($filter){
return function(data, text){
var textArr = text.split(' ');
angular.forEach(textArr, function(test){
if(test){
data = $filter('filter')(data, test);
}
});
return data;
}
}]);
Lets assume you have two array, one for movie and one for genre
Just use the filter as: filter:{genres: genres.type}
Here genres being the array and type has value for genre
I wrote this for strings AND functionality (I know it's not the question but I searched for it and got here), maybe it can be expanded.
String.prototype.contains = function(str) {
return this.indexOf(str) != -1;
};
String.prototype.containsAll = function(strArray) {
for (var i = 0; i < strArray.length; i++) {
if (!this.contains(strArray[i])) {
return false;
}
}
return true;
}
app.filter('filterMultiple', function() {
return function(items, filterDict) {
return items.filter(function(item) {
for (filterKey in filterDict) {
if (filterDict[filterKey] instanceof Array) {
if (!item[filterKey].containsAll(filterDict[filterKey])) {
return false;
}
} else {
if (!item[filterKey].contains(filterDict[filterKey])) {
return false;
}
}
}
return true;
});
};
});
Usage:
<li ng-repeat="x in array | filterMultiple:{key1: value1, key2:[value21, value22]}">{{x.name}}</li>
Angular Or Filter Module
$filter('orFilter')([{..}, {..} ...], {arg1, arg2, ...}, false)
here is the link: https://github.com/webyonet/angular-or-filter
I had similar situation. Writing custom filter worked for me. Hope this helps!
JS:
App.filter('searchMovies', function() {
return function (items, letter) {
var resulsts = [];
var itemMatch = new RegExp(letter, 'i');
for (var i = 0; i < items.length; i++) {
var item = items[i];
if ( itemMatch.test(item.name) || itemMatch.test(item.genre)) {
results.push(item);
}
}
return results;
};
});
HTML:
<div ng-controller="MoviesCtrl">
<ul>
<li ng-repeat="movie in movies | searchMovies:filterByGenres">
{{ movie.name }} {{ movie.genre }}
</li>
</ul>
</div>
Here is my example how create filter and directive for table jsfiddle
directive get list (datas) and create table with filters
<div ng-app="autoDrops" ng-controller="HomeController">
<div class="row">
<div class="col-md-12">
<h1>{{title}}</h1>
<ng-Multiselect array-List="datas"></ng-Multiselect>
</div>
</div>
</div>
my pleasure if i help you
Too late to join the party but may be it can help someone:
We can do it in two step, first filter by first property and then concatenate by second filter:
$scope.filterd = $filter('filter')($scope.empList, { dept: "account" });
$scope.filterd = $scope.filterd.concat($filter('filter')($scope.empList, { dept: "sales" }));
See the working fiddle with multiple property filter
OPTION 1: Using Angular providered filter comparator parameter
// declaring a comparator method
$scope.filterBy = function(actual, expected) {
return _.contains(expected, actual); // uses underscore library contains method
};
var employees = [{name: 'a'}, {name: 'b'}, {name: 'c'}, {name: 'd'}];
// filter employees with name matching with either 'a' or 'c'
var filteredEmployees = $filter('filter')(employees, {name: ['a','c']}, $scope.filterBy);
OPTION 2: Using Angular providered filter negation
var employees = [{name: 'a'}, {name: 'b'}, {name: 'c'}, {name: 'd'}];
// filter employees with name matching with either 'a' or 'c'
var filteredEmployees = $filter('filter')($filter('filter')(employees, {name: '!d'}), {name: '!b'});
My solution
ng-repeat="movie in movies | filter: {'Action'} + filter: {'Comedy}"
the best answer is :
filter:({genres: 'Action', genres: 'Comedy'}
참고URL : https://stackoverflow.com/questions/15868248/how-to-filter-multiple-values-or-operation-in-angularjs
'IT' 카테고리의 다른 글
C # 변수 이름 앞에 @를두면 무엇을합니까? (0) | 2020.06.29 |
---|---|
Vue에서 계산 된 방법과 방법 (0) | 2020.06.29 |
특정 값을 가진 stl 벡터에서 항목을 어떻게 제거합니까? (0) | 2020.06.29 |
직렬화 및 역 직렬화 중에 다른 JSON 속성 이름 (0) | 2020.06.29 |
세그먼테이션 오류를 일으키는 코드 줄을 결정 하시겠습니까? (0) | 2020.06.29 |