AngularJS로 배열을 필터링하고 필터링 된 객체의 속성을 ng-model 속성으로 사용하려면 어떻게합니까?
객체 배열이 있고 각도 모델을 필터를 기반으로 한 요소 중 하나의 속성에 바인딩하려면 어떻게해야합니까? 구체적인 예를 통해 더 잘 설명 할 수 있습니다.
HTML :
<!DOCTYPE html>
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body ng-controller="MyCtrl">
<input ng-model="results.year">
<input ng-model="results.subjects.title | filter:{grade:'C'}">
</body>
</html>
제어 장치:
function MyCtrl($scope) {
$scope.results = {
year:2013,
subjects:[
{title:'English',grade:'A'},
{title:'Maths',grade:'A'},
{title:'Science',grade:'B'},
{title:'Geography',grade:'C'}
]
};
}
JSBin : http://jsbin.com/adisax/1/edit
등급 'C'를 사용하여 주제에 대한 두 번째 입력을 필터링하고 싶지만 모델을 등급에 바인딩하고 싶지 않습니다 . 'C'등급의 과목 제목 에 묶고 싶습니다 .
이것이 가능합니까? 그렇다면 가능합니까?
<div ng-repeat="subject in results.subjects | filter:{grade:'C'}">
<input ng-model="subject.title" />
</div>
컨트롤러에서 "필터"필터를 사용하여 모든 "C"등급을 얻을 수 있습니다. 결과 배열의 첫 번째 요소를 얻으면 "C"등급을 가진 과목 의 제목 이 제공됩니다 .
$scope.gradeC = $filter('filter')($scope.results.subjects, {grade: 'C'})[0];
http://jsbin.com/ewitun/1/edit
일반 ES6와 동일합니다.
$scope.gradeC = $scope.results.subjects.filter((subject) => subject.grade === 'C')[0]
다음은 작동하는 샘플로 수정 된 JSBin입니다.
http://jsbin.com/sezamuja/1/edit
입력에서 필터로 수행 한 작업은 다음과 같습니다.
<input ng-model="(results.subjects | filter:{grade:'C'})[0].title">
다음과 같이 $ filter를 사용하는 경우 참고하십시오.
$scope.failedSubjects = $filter('filter')($scope.results.subjects, {'grade':'C'});
그리고 당신은 Oh I dunno, CC 또는 AC 또는 C + 또는 CCC를위한 또 다른 등급을 얻었습니다. 정확히 일치하는 요구 사항을 추가해야합니다.
$scope.failedSubjects = $filter('filter')($scope.results.subjects, {'grade':'C'}, true);
다음과 같은 커미션 세부 정보를 가져올 때 실제로 나를 죽였습니다.
var obj = this.$filter('filter')(this.CommissionTypes, { commission_type_id: 6}))[0];
6이 아닌 수수료 ID 56을 가져 오기 때문에 버그만 불러옵니다.
참을 추가하면 정확히 일치합니다.
var obj = this.$filter('filter')(this.CommissionTypes, { commission_type_id: 6}, true))[0];
그러나 여전히 나는 이것을 선호합니다 (나는 typescript를 사용하므로 "Let"과 =>).
let obj = this.$filter('filter')(this.CommissionTypes, (item) =>{
return item.commission_type_id === 6;
})[0];
나는 길을 따라 어느 시점에서 필터링 된 데이터 등에서 더 많은 정보를 얻고 싶을 수도 있습니다 ... 기능을 가지고 있으면 후드를 열어 둡니다.
컨트롤러에서 별도의 결과 목록을 생성하려는 경우 필터를 적용 할 수 있습니다
function MyCtrl($scope, filterFilter) {
$scope.results = {
year:2013,
subjects:[
{title:'English',grade:'A'},
{title:'Maths',grade:'A'},
{title:'Science',grade:'B'},
{title:'Geography',grade:'C'}
]
};
//create a filtered array of results
//with grade 'C' or subjects that have been failed
$scope.failedSubjects = filterFilter($scope.results.subjects, {'grade':'C'});
}
그러면 결과 객체를 참조하는 것과 같은 방법으로 failedSubjects 를 참조 할 수 있습니다
https://docs.angularjs.org/guide/filter 여기에서 더 자세히 읽을 수 있습니다.
이 답변 angular는 설명서를 업데이트 했으므로 이제 필터를 호출하는 것이 좋습니다.
// update
// eg: $filter('filter')(array, expression, comparator, anyPropertyKey);
// becomes
$scope.failedSubjects = $filter('filter')($scope.results.subjects, {'grade':'C'});
ES6를 사용하는 경우 다음을 수행 할 수 있습니다.
var sample = [1, 2, 3]
var result = sample.filter(elem => elem !== 2)
/* output */
[1, 3]
또한 필터는 기존 배열을 업데이트하지 않으며 매번 새로운 필터링 된 배열을 반환합니다.
You can also use functions with $filter('filter'):
var foo = $filter('filter')($scope.results.subjects, function (item) {
return item.grade !== 'A';
});
Applying same filter in HTML with multiple columns, just example:
variable = (array | filter : {Lookup1Id : subject.Lookup1Id, Lookup2Id : subject.Lookup2Id} : true)
'IT박스' 카테고리의 다른 글
| 반응 네이티브에서 컴포넌트 숨기기 / 보이기 (0) | 2020.07.16 |
|---|---|
| URL에 대한 PHP 유효성 검사 / 정규식 (0) | 2020.07.16 |
| Android에서 EditText의 최대 문자 수를 어떻게 설정합니까? (0) | 2020.07.16 |
| jQuery는 키를 누른 후 입력 값을 얻습니다. (0) | 2020.07.16 |
| 안드로이드의 RecyclerView에 간단한 8dp 헤더 / 바닥 글을 추가하는 방법은 무엇입니까? (0) | 2020.07.16 |