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

Program / 글쓴이

객체 배열이 있고 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 등급 과목 의 제목 에 묶고 싶어요 .

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

답변

<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];

그래도 나는 이것을 선호한다 (나는 타이프 스크립트를 사용하므로 “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에서 자세한 내용을 읽을 수 있습니다.

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

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

답변

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

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

답변

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

var sample = [1, 2, 3]

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

/* output */
[1, 3]

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