AngularJS : 커스텀필터 및 ng-repeat

AngularJS : 커스텀필터 및 ng-repeat

나는 앵귤러다JS newbie와 저는 몇 가지 JSON을 불러와서 몇 가지 필터를 사용하여 그 데이터의 다양한 부분을 렌더링하는 개념 증명 자동차 렌트 목록 앱을 만들고 있습니다.

   <article data-ng-repeat="result in results | filter:search" class="result">
        <header><h3>{{result.carType.name}}, {{result.carDetails.doors}} door, &pound;{{result.price.value}} - {{ result.company.name }}</h3></header>
            <ul class="result-features">
                <li>{{result.carDetails.hireDuration}} day hire</li>
                <li data-ng-show="result.carDetails.airCon">Air conditioning</li>
                <li data-ng-show="result.carDetails.unlimitedMileage">Unlimited Mileage</li>
                <li data-ng-show="result.carDetails.theftProtection">Theft Protection</li>
            </ul>
    </article>

    <h2>Filters</h2>

    <h4>Doors:</h4> 
    <select data-ng-model="search.carDetails">
        <option value="">All</option>
        <option value="2">2</option>
        <option value="4">4</option>
        <option value="9">9</option>
    </select>

    <h4>Provider:</h4>
    Atlas Choice <input type="checkbox"  data-ng-model="search.company" ng-true-value="Atlas Choice" ng-false-value="" value="Atlas Choice" /><br>
    Holiday Autos <input type="checkbox"  data-ng-model="search.company" ng-true-value="Holiday Autos" ng-false-value="" value="Holiday Autos" /><br>
    Avis <input type="checkbox"  data-ng-model="search.company" ng-true-value="Avis" ng-false-value="" value="Avis" /><br>      

이제 컨트롤러에 커스텀필터를 만듭니다.이 필터는 ng-repeat 내의 항목을 반복하여 특정 기준을 충족하는 항목만 반환할 수 있습니다.예를 들어, 'provider' 체크박스가 켜져 있는 것을 기준으로 값의 배열을 작성한 후 이에 대해 각 ng-repeat 항목을 평가할 수 있습니다.구문상으로는 어떻게 해야 할지 모르겠어요.누구라도 도와줄 수 있어요?

여기 제 Plucker가 있습니다.http://plnkr.co/edit/lNJNYagMC2rszbSOF95k?p=preview

커스텀 필터 로직을 실행하려면 어레이 요소를 인수로 사용하고 반환하는 함수를 생성할 수 있습니다.true또는false검색 결과에 포함시켜야 하는지 여부에 따라 달라집니다.그리고 그것을 에 전달합니다.filter이 명령어를 사용할 때처럼search예를 들어 다음과 같습니다.

JS:

$scope.filterFn = function(car)
{
    // Do some tests

    if(car.carDetails.doors > 2)
    {
        return true; // this will be listed in the results
    }

    return false; // otherwise it won't be within the results
};

HTML:

...
<article data-ng-repeat="result in results | filter:search | filter:filterFn" class="result">
...

보시다시피 많은 필터를 체인으로 연결할 수 있기 때문에 커스텀필터 기능을 추가해도,search(이들은 심리스하게 연계됩니다.

그래도 사용자 정의 필터를 원하는 경우 검색 모델을 필터에 전달할 수 있습니다.

<article data-ng-repeat="result in results | cartypefilter:search" class="result">

여기서 cartype filter의 정의는 다음과 같습니다.

app.filter('cartypefilter', function() {
  return function(items, search) {
    if (!search) {
      return items;
    }

    var carType = search.carType;
    if (!carType || '' === carType) {
      return items;
    }

    return items.filter(function(element, index, array) {
      return element.carType.name === search.carType;
    });

  };
});

http://plnkr.co/edit/kBcUIayO8tQsTTjTA2vO?p=preview

같은 ng-repeat 필터로 여러 함수필터를 호출할 수 있습니다.

<article data-ng-repeat="result in results | filter:search() | filter:filterFn()" class="result">

이 문제를 해결하는 가장 쉬운 방법 중 하나는$그게 검색의 전부입니다.

여기 그것이 작동하는 것을 보여주는 플런커가 있습니다.체크박스를 radio로 변경했습니다(보완성이 필요하다고 생각했기 때문에).

http://plnkr.co/edit/dHzvm6hR5P8G4wPuTxoi?p=preview

(일반적인 검색이 아닌) 매우 구체적인 방법으로 이 작업을 수행하려면 검색 기능을 사용해야 합니다.

설명서는 이쪽입니다.

http://docs.angularjs.org/api/ng.filter:filter

언급URL : https://stackoverflow.com/questions/16563018/angularjs-custom-filters-and-ng-repeat