AngularJS에서 여러 특정 모델 특성에 의한 필터링(OR 관계)
http://docs.angularjs.org/api/ng.filter:filter 의 예를 참조해 주세요.
중 할 수 .<input ng-model="search">할 수 .<input ng-model="search.name">는, 그 결과를 이름으로 적절히 필터링 합니다(전화 번호에 입력해도, 예상대로 결과는 반환되지 않습니다).
"이름" 속성, "전화" 속성 및 "비밀" 속성을 가진 모델이 있다고 가정해 보겠습니다. "비밀" 속성이 아닌 "이름" 및 "전화" 속성을 모두 기준으로 필터링하려면 어떻게 해야 합니까?따라서 기본적으로 사용자는 이름 또는 전화번호를 입력하고ng-repeat는 올바르게 필터링되지만 사용자가 "비밀" 값의 일부에 해당하는 값을 입력해도 아무것도 반환되지 않습니다.
감사해요.
여기 플런커가 있습니다.
더 깨끗한 코드를 가진 새로운 플런커로 쿼리와 검색 목록 항목 모두 대소문자를 구분하지 않습니다.
이러한 목적을 달성하기 위한 필터 기능을 만드는 것이 주요 아이디어입니다.
공식 문서에서
기능:술어 함수를 사용하여 임의 필터를 쓸 수 있습니다.이 함수는 배열의 각 요소에 대해 호출됩니다.최종 결과는 술어가 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 변경을 하기 위해
필터 기능을 트리거합니다.
API Reference에서 설명한 바와 같이 오브젝트를 필터식으로 전달할 수 있습니다.이 개체는 다음과 같이 관심 있는 속성을 선택적으로 적용할 수 있습니다.
<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의 솔루션을 사용하는 경우가 있습니다.
@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;
};
서드파티 라이브러리를 사용할 경우 필터 모음의 '각도 필터'가 유용할 수 있습니다.
https://github.com/a8m/angular-filter#filterby
collection | filterBy: [prop, nested.prop, etc..]: search
이 답변이 도움이 되기를 바랍니다.다중값 필터
그리고 이 바이올린의 작동 예는
arrayOfObjectswithKeys | filterMultiple:{key1:['value1','value2','value3',...etc],key2:'value4',key3:[value5,value6,...etc]}
filterBy in angularJs를 사용한 매우 직선적인 접근법
plnkr가 동작하고 있는 경우는, 다음의 링크를 클릭하십시오.
http://plnkr.co/edit/US6xE4h0gD5CEYV0aMDf?p=preview
이 방법에서는 특히 단일 속성을 사용하여 여러 열에 대해 검색하지만 전부는 아닙니다.
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script data-require="angular.js@1.4.1" data-semver="1.4.1" src="https://code.angularjs.org/1.4.1/angular.js"></script>
<script data-require="angular-filter@0.5.2" data-semver="0.5.2" src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.2/angular-filter.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="myCtrl as vm">
<input type="text" placeholder="enter your search text" ng-model="vm.searchText" />
<table>
<tr ng-repeat="row in vm.tableData | filterBy: ['col1','col2']: vm.searchText">
<td>{{row.col1}}</td>
<td>{{row.col2}}</td>
<td>{{row.col3}}</td>
</tr>
</table>
<p>This will show filter from <b>two columns</b> only(col1 and col2) . Not from all. Whatever columns you add into filter array they
will be searched. all columns will be used by default if you use <b>filter: vm.searchText</b></p>
</body>
</html>
컨트롤러
// Code goes here
(function(){
var myApp = angular.module('myApp',['angular.filter']);
myApp.controller('myCtrl', function($scope){
var vm= this;
vm.x = 20;
vm.tableData = [
{
col1: 'Ashok',
col2: 'Tewatia',
col3: '12'
},{
col1: 'Babita',
col2: 'Malik',
col3: '34'
},{
col1: 'Dinesh',
col2: 'Tewatia',
col3: '56'
},{
col1: 'Sabita',
col2: 'Malik',
col3: '78'
}
];
})
})();
여기에는 좋은 해결책들이 많이 있지만, 나는 이것을 가지고 다른 길로 가는 것을 추천한다.검색이 가장 중요하고 뷰에서 '비밀' 속성이 전혀 사용되지 않는 경우, 이를 위한 접근법은 내장된 각도 필터를 모든 이점과 함께 사용하여 모델을 새로운 객체 배열에 매핑하는 것입니다.
질문의 예:
$scope.people = members.map(function(member) {
return {
name: member.name,
phone: member.phone
}});
이제 html에서는 일반 필터를 사용하여 두 속성을 모두 검색합니다.
<div ng-repeat="member in people | filter: searchString">
간단하게 해결했습니다.
<div ng-repeat="Object in List | filter: (FilterObj.FilterProperty1 ? {'ObjectProperty1': FilterObj.FilterProperty1} : '') | filter:(FilterObj.FilterProperty2 ? {'ObjectProperty2': FilterObj.FilterProperty2} : '')">
http://plnkr.co/edit/A2IG03FLYnEYMpZ5RxEm?p=preview
여기에서는 대소문자를 구분하여 검색을 각 모델에서도 검색할 수 있는 단어로 구분합니다.공간을 찾은 경우에만 쿼리를 배열로 분할한 다음 각 단어를 검색합니다.
모든 단어가 하나 이상의 모델에 있으면 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);
}
};
필터는 필드가 있는 JavaScript 개체일 수 있으며 다음과 같은 식을 사용할 수 있습니다.
ng-repeat= 'item in list | filter :{property:value}'
가능한 한 심플하게 유지하는 것을 좋아합니다.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>
많이 늦을지도 모르지만 결국 이렇게 된 거예요.나는 아주 일반적인 필터를 만들었다.
angular.module('app.filters').filter('fieldFilter', function() {
return function(input, clause, fields) {
var out = [];
if (clause && clause.query && clause.query.length > 0) {
clause.query = String(clause.query).toLowerCase();
angular.forEach(input, function(cp) {
for (var i = 0; i < fields.length; i++) {
var haystack = String(cp[fields[i]]).toLowerCase();
if (haystack.indexOf(clause.query) > -1) {
out.push(cp);
break;
}
}
})
} else {
angular.forEach(input, function(cp) {
out.push(cp);
})
}
return out;
}
})
그럼 이렇게 쓰세요.
<tr ng-repeat-start="dvs in devices | fieldFilter:search:['name','device_id']"></tr>
검색창은 다음과 같습니다.
<input ng-model="search.query" class="form-control material-text-input" type="text">
여기서 name 및 device_id는 dvs 단위의 속성입니다.
다음은 개체에 대한 빠른 필터를 원하는 사용자를 위한 간단한 솔루션입니다.
<select>
<option ng-repeat="card in deck.Cards | filter: {Type: 'Face'}">{{card.Name}}</option>
</select>
배열 필터를 사용하면 필터링하려는 개체를 모방할 수 있습니다.위의 경우 다음 클래스가 정상적으로 작동합니다.
var card = function(name, type) {
var _name = name;
var _type = type;
return {
Name: _name,
Type: _type
};
};
그리고 갑판이 어떻게 생겼는지:
var deck = function() {
var _cards = [new card('Jack', 'Face'),
new card('7', 'Numeral')];
return {
Cards: _cards
};
};
개체의 여러 속성을 필터링하려면 필드 이름을 쉼표로 구분하십시오.
<select>
<option ng-repeat="card in deck.Cards | filter: {Type: 'Face', Name: 'Jack'}">{{card.Name}}</option>
</select>
편집: 다음은 단일 및 다중 속성 필터의 예를 제공하는 작동 중인 PLNkr입니다.
http://embed.plnkr.co/i0wCx6l1WPYljk57SXzV/
언급URL : https://stackoverflow.com/questions/13216115/filtering-by-multiple-specific-model-properties-in-angularjs-in-or-relationship
'programing' 카테고리의 다른 글
| 이유: void가 mockito 사용에 적합하도록 유형 변수 T의 인스턴스가 존재하지 않습니다. (0) | 2023.03.10 |
|---|---|
| 이온 이력은 어떻게 동작하며 비루트 스택은 언제 작성됩니까? (0) | 2023.03.10 |
| AngularJS $resource는 url 대신 쿼리 파라미터로 ID를 전달합니다. (0) | 2023.03.10 |
| 우편번호를 데이터베이스에 저장해야 합니다.기둥은 얼마나 커야 합니까? (0) | 2023.03.10 |
| Oracle Date - 지금까지의 연도를 추가하는 방법 (0) | 2023.03.10 |