AngularJS로 배열을 필터링하고 필터링 된 객체의 속성을 ng-model 속성으로 사용하려면 어떻게해야합니까?

122

객체 배열이 있고 Angular 모델을 필터를 기반으로 한 요소 중 하나의 속성에 바인딩하려면 어떻게해야합니까? 구체적인 예를 들어 더 잘 설명 할 수 있습니다.

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 등급 과목 의 제목 에 묶고 싶어요 .

이것이 가능합니까? 그렇다면 어떻게 수행됩니까?

angularjs

— Bernhard Hofmann
소스

127

<div ng-repeat="subject in results.subjects | filter:{grade:'C'}">
    <input ng-model="subject.title" />
</div>

— JB 니제
소스

1

나는 당신이 그것으로 어디로 가고 있는지 알지만 나는 정말로 리피터를 원하지 않았습니다. 실제로 필터링 할 속성은 ID 열이므로 고유합니다. 그러나 이것이 일반적인 문제를 해결하는 올바른 방법이라고 생각합니다.

— Bernhard Hofmann 2013

1

이 이탈리아어 명 : 대한 튜토리얼입니다 dev.stasbranger.com/post/77190983049/...

— 실비오 트로이아

10

이것은 매우 도움이되었고 역 (C 이외의 모든 것)의 경우 다음과 같이 작동합니다.filter:{grade:'!'+'C'}

— pulkitsinghal

2

와 똑같이 할 수 있습니까 grade array? 제 경우에는 트 리뷰에서 등급 배열을 만들고 배열의 결과를 필터링하고 싶습니다.

— Juan Carlos Oropeza

157

컨트롤러의 "필터"필터를 사용하여 모든 "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]

— 올리버
소스

두 번째 필터 ( '필터')를 따르지 않아서 죄송합니다. 하나 더 설명해 주시겠습니까?

— Winnemucca

1

@stevek 이것이 필터의 이름입니다. filter () 메서드는 필터를 제공합니다. 필터는 배열을 필터링하기 때문에 필터라고 불립니다. 통화 필터를 사용하면 다음과 같습니다. $ filter ( 'currency') (amount, symbol, fractionSize) 여기에서 문서를 확인하십시오. docs.angularjs.org/api/ng/filter

— Oliver

61

다음은 작업 샘플이 포함 된 수정 된 JSBin입니다.

http://jsbin.com/sezamuja/1/edit

다음은 입력에서 필터로 수행 한 작업입니다.

<input ng-model="(results.subjects | filter:{grade:'C'})[0].title">

— lukeatdesignworks
소스

1

이것은 진짜 거래입니다. 이것이 힘입니다. 이게 방법이야. 나는 이것과 함께 갔고 이제 나는 행복합니다.

— user1576978 2015-08-30

13

다음과 같이 $ 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];

그래도 나는 이것을 선호한다 (나는 타이프 스크립트를 사용하므로 "Let"과 =>) :

let obj = this.$filter('filter')(this.CommissionTypes, (item) =>{ 
             return item.commission_type_id === 6;
           })[0];

길을 따라가는 어느 시점에서 필터링 된 데이터 등에서 더 많은 정보를 얻고 싶을 수 있기 때문에 그렇게합니다. 기능이 바로 거기에 있으면 후드가 열려 있습니다.

— 다니엘 모리스
소스

세 번째 부울 매개 변수에 대한 힌트 덕분에 당신과 같은 오류가 발생했습니다. 그것을 인식하지 못했습니다.

— Georg Leber

12

컨트롤러에서 별도의 결과 목록을 만들고 싶다면 필터를 적용 할 수 있습니다.

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에서 자세한 내용을 읽을 수 있습니다.

이 답변 각도가 문서를 업데이트했기 때문에 이제 필터를 호출하는 것이 좋습니다.

// update 
// eg: $filter('filter')(array, expression, comparator, anyPropertyKey);
// becomes
$scope.failedSubjects = $filter('filter')($scope.results.subjects, {'grade':'C'});

— 키에 란
소스

filterFilter 란 무엇입니까? 서비스 또는 지침입니까? filterFilter의 코드는 어디에 있습니까?

— Mou

그것은 각도 서비스입니다. 위 링크의 첫 번째 예를 살펴보십시오. (scripts.js 파일에 있음)

— Kieran 2011

문서를 변경했지만 filterFilter는 여전히 작동합니다.

— Kieran

4

다음 과 함께 함수 를 사용할 수도 있습니다 . $filter('filter')

var foo = $filter('filter')($scope.results.subjects, function (item) {
  return item.grade !== 'A';
});

— Nelu
소스

4

ES6를 사용하는 경우 다음을 수행 할 수 있습니다.

var sample = [1, 2, 3]

var result = sample.filter(elem => elem !== 2)

/* output */
[1, 3]

또한 필터는 기존 배열을 업데이트하지 않으며 매번 새 필터링 된 배열을 반환합니다.

— 디에고 베난시오
소스

0

여러 열이있는 HTML에서 동일한 필터 적용, 예 :

 variable = (array | filter : {Lookup1Id : subject.Lookup1Id, Lookup2Id : subject.Lookup2Id} : true)

— 아마이 쿨 카르 니
소스