arrays filter - AngularJS 커스텀 필터 기능




custom parameter (4)

내 컨트롤러 내에서 개체 배열을 필터링하고 싶습니다. 이러한 각 객체는 목록뿐만 아니라 문자열을 포함 할 수있는지도입니다.

필자는 $filter('filter')(array, function) 형식을 사용했지만 함수 내 배열의 개별 요소에 액세스하는 방법을 모르겠습니다. 여기 내가 원하는 것을 보여주는 스 니펫이 있습니다.

$filter('filter')(array, function() {
  return criteriaMatch(item, criteria);
});

criteriaMatch() 에서 개별 속성이 일치하는지 확인합니다.

var criteriaMatch = function(item, criteria) {
  // go thro each individual property in the item and criteria
  // and check if they are equal
}

컨트롤러에서이 모든 작업을 수행하고 목록의 목록을 컴파일하고 범위에서 설정해야합니다. 그래서 나는 $filter('filter') 에 접근 할 필요가있다. 지금까지 넷에서 찾은 모든 예제는 함수 내에서 정적 기준 검색을했지만 배열의 각 항목에 대해 기준 오브젝트와 테스트를 통과하지 않았습니다.


Answers

또한 컨트롤러에서 필터를 사용하는 것과 같은 방식으로 여기에서 필터를 사용하려면 다음을 수행하십시오.

<div ng-repeat="item in items | filter:criteriaMatch(criteria)">
  {{ item }}
</div>

당신은 다음과 같이 할 수 있습니다 :

var filteredItems =  $scope.$eval('items | filter:filter:criteriaMatch(criteria)');

다음과 같이 사용할 수 있습니다. http://plnkr.co/edit/vtNjEgmpItqxX5fdwtPi?p=preview

찾은 것처럼 filter 는 배열의 항목을 항목별로 받아들이는 술어 함수를 허용합니다. 따라서 주어진 criteria 에 따라 술어 함수를 작성하면됩니다.

이 예에서 criteriaMatch 는 주어진 criteria 과 일치하는 술어 함수를 리턴하는 함수입니다.

주형:

<div ng-repeat="item in items | filter:criteriaMatch(criteria)">
  {{ item }}
</div>

범위:

$scope.criteriaMatch = function( criteria ) {
  return function( item ) {
    return item.name === criteria.name;
  };
};

다음은 HTML 요소가 아닌 AngularJS JavaScript 내에서 filter 사용하는 방법의 예입니다.

이 예제에서는 각 레코드에 이름과 3 자리의 ISO 코드가 포함 된 국가 레코드 배열이 있습니다.

이 목록을 통해 특정 3 문자 코드와 일치하는 레코드를 검색하는 함수를 작성하려고합니다.

filter 사용 하지 않고 이를 수행하는 방법은 다음과 같습니다.

$scope.FindCountryByCode = function (CountryCode) {
    //  Search through an array of Country records for one containing a particular 3-character country-code.
    //  Returns either a record, or NULL, if the country couldn't be found.
    for (var i = 0; i < $scope.CountryList.length; i++) {
        if ($scope.CountryList[i].IsoAlpha3 == CountryCode) {
            return $scope.CountryList[i];
        };
    };
    return null;
};

네, 그게 잘못된 것은 아닙니다.

그러나 다음과 같은 함수가 filter 사용하여 보입니다.

$scope.FindCountryByCode = function (CountryCode) {
    //  Search through an array of Country records for one containing a particular 3-character country-code.
    //  Returns either a record, or NULL, if the country couldn't be found.

    var matches = $scope.CountryList.filter(function (el) { return el.IsoAlpha3 == CountryCode; })

    //  If 'filter' didn't find any matching records, its result will be an array of 0 records.
    if (matches.length == 0)
        return null;

    //  Otherwise, it should've found just one matching record
    return matches[0];
};

훨씬 더 깔끔하게.

filter 는 배열 (일치하는 레코드 목록)을 반환하므로이 예제에서는 1 레코드 또는 NULL을 반환하려고합니다.

희망이 도움이됩니다.


스프레드 연산자로 es6 해체 배열 사용

var last = [...yourArray].pop();

yourArray는 변경되지 않습니다.





arrays angularjs filter controller