개체 키에 정확히 각도 필터
다음과 같은 작은 각도 앱이 있습니다.
html
<body ng-app>
<div ng-controller="Ctrl">
<div ng-repeat="user in users | filter:1">
<span>{{ user.username }}, {{ user.id }}</span>
</div>
</div>
</body>
app.module
function Ctrl($scope) {
$scope.users = [
{"id":1,"username":"simon",},
{"id":8,"username":"betty",},
{"id":14,"username":"archie",},
{"id":3,"username":"jumbo1"},
]
}
산출량
simon, 1
archie, 14
jumbo1, 3
필터 인수 AND 필터의 정확한 일치를 id 필드만으로 필터링합니다.
기본적으로 다음과 같은 출력이 필요합니다.
산출량
simon, 1
저는 Angular 1.2를 쓰고 있어요.
Angular 1.1.3 이상에서는 다음을 사용할 수 있습니다.
<div ng-repeat="user in users | filter:{'id': 1}:true">
{'id': 1}필드만 비교하라고 합니다.id. 그러면 다음과 같이 됩니다.
simon, 1
archie, 14
:true는 "syslog match"를 나타내며 다음과 같은 결과를 초래합니다.
simon, 1
http://jsfiddle.net/AM95H/를 참조해 주세요.
스코프 변수에 리스트가 있는 경우 값 목록을 필터링하려면 JS 파일에 커스텀필터를 추가합니다.
$scope.filterValues = [1,8];
$scope.myFilter = function(value) {
return ($scope.filterValues.indexOf(value.id) !== -1);
};
다음과 같이 사용:
<div ng-repeat="user in users | filter: myFilter">
매개 변수 목록을 기준으로 필터링하기 위해 자체 필터를 만듭니다.이 경우 테스트할 모든 입력값으로 호출이 1회만 아니라 1회만 호출됩니다.
첫 번째 파라미터는 입력값 배열(사용자의 경우 사용자)이고 두 번째 파라미터는 전달되는 파라미터([1,8])입니다.그런 다음 출력 배열을 생성하여 입력 스트림에 다음 중 하나와 일치하는 항목을 추가(푸시)합니다.filterValues출력 어레이를 반환합니다.
myApp.filter('myFilter', function () {
return function(inputs,filterValues) {
var output = [];
angular.forEach(inputs, function (input) {
if (filterValues.indexOf(input.id) !== -1)
output.push(input);
});
return output;
};
});
그리고 이렇게 사용하세요.
<div ng-repeat="user in users | myFilter:[1,8]">
다음은 예를 제시하겠습니다.http://jsfiddle.net/AM95H/2/
에 기반을 둔https://docs.angularjs.org/api/ng/filter/filter
템플릿 필터:
<tr ng-repeat="friendObj in friends | filter:id:true">
<td>{{friendObj.name}}</td>
<td>{{friendObj.phone}}</td>
</tr>
컨트롤러 필터($param 포함)
$scope.friendObj = $filter('filter')(data.friends, { id: parseInt($stateParams.friendId) }, true)[0];
필터를 적용할 필터 내 객체의 키(속성)를 지정합니다.
//Suppose Object
var users = [{
"firstname": "RAM",
"lastname": "KUMAR",
"Address": "HOUSE NO-1, Example Street, Example Town"
},
{
"firstname": "SHAM",
"lastname": "RAJ K",
"Address": "HOUSE NO-1, Example Street, Example Town"
}]
그러나 필터는 이름에만 적용하려고 합니다.
<input type = "text" ng-model = "f_n_model"/>
<div ng-repeat="user in users| filter:{ firstname: f_n_model}">
이것이 도움이 되는지 확인합니다.
var rateSelected = $filter('filter')($scope.GradeList, function (obj) {
if(obj.GradeId == $scope.contractor_emp.save_modal_data.GradeId)
return obj;
});
HTML:
<tr class="text"
*ngFor="let resource of myProjectsList |searchByKeyPipe: projectNameFilter:
'projectName'| searchByKeyPipe: projectIdFilter : 'projectRefNo' |
searchByKeyPipe: dueDateFilter : 'dueOn'| searchByKeyPipe: ownerFilter :
'projectOwnerName' trackBy :trackByNameFunc">
JS
import { Pipe, PipeTransform } from "@angular/core";
@Pipe({
name: "searchByKeyPipe",
pure: false // marking this pipe as stateful pipe
})
export class SearchByKeyPipe implements PipeTransform {
transform(items: any, filter: any, key: any) {
return items.filter(item => {
if (filter == "" || filter == "-1") {
return true;
} else {
var self = this;
return function() {
return item[key]
.toString()
.toLowerCase()
.indexOf(filter.toLowerCase()) > -1
? true
: false;
})();
}
});
}
이렇게 하면 키의 입력 상자를 여러 개 가질 수 있으며, 특정 키를 검색합니다.
언급URL : https://stackoverflow.com/questions/20292638/angular-filter-exactly-on-object-key
'programing' 카테고리의 다른 글
| @PathVariable in SpringBoot(URL 슬래시 포함) (0) | 2023.02.23 |
|---|---|
| 갑자기 Springfox Swagger 3.0이 spring webflux에서 작동하지 않음 (0) | 2023.02.23 |
| 프로토콜 버퍼와 JSON 또는 BSON 비교 (0) | 2023.02.15 |
| 심판에게 소품을 건네는 적절한 방법은 무엇입니까? (0) | 2023.02.15 |
| Swagger UI를 스프링 부팅과 함께 사용할 수 없습니다. (0) | 2023.02.15 |