14

I have upgraded to Angular 1.2.9 from v 1.0.8 to help with the performance of my app.

I have introduced track by which has improved the speed.

What I used to have

<div class="result row"
    data-ng-repeat="result in (filteredItems =
            (results |
            filter: filterPrice |
            filter: filterCategories |
            filter: filterTypes |
            filter: filterAirConditioning |
            filter: filterTransmission |
            filter: filterFourByFour |
            filter: filterFuelType |
            filter: filterNumberOfDoors |
            filter: filterOnAirport |
            filter: filterFuelPolicy |
            filter: filterUnlimitedMileage |
            filter: filterFreeCancellation |
            filter: filterTheftProtection |
            filter: filterCDW |
            filter: filterTaxesIncluded |
            filter: filterProviders ) )  |
        orderBy: [orderByOptions, orderByPriceLowToHigh, orderByPriority] |
        limitTo: pageSize">

what I have now

<div class="result row"
    data-ng-repeat="result in results |
        filter: filterPrice |
        filter: filterCarCategories |
        filter: filterCarTypes |
        filter: filterAirConditioning |
        filter: filterTransmission |
        filter: filterFourByFour |
        filter: filterFuelType |
        filter: filterNumberOfDoors |
        filter: filterOnAirport |
        filter: filterFuelPolicy |
        filter: filterUnlimitedMileage |
        filter: filterFreeCancellation |
        filter: filterTheftProtection |
        filter: filterCDW |
        filter: filterTaxesIncluded |
        filter: filterProviders |
        orderBy: [orderByOptions, orderByPriceLowToHigh, orderByPriority] |
        startFrom: currentPage*pageSize |
        limitTo: pageSize track by $index">

I have pagination which looked for the length of filteredItems. That no longer exists. Also, some other JS needs the filteredItems for logging, analytics, etc

In the HTML view I can get the length of the ng-repeat after filters have been applied

{{(results |
    filter: filterPrice |
    filter: filterCarCategories |
    filter: filterCarTypes |
    filter: filterAirConditioning |
    filter: filterTransmission |
    filter: filterFourByFour |
    filter: filterFuelType |
    filter: filterNumberOfDoors |
    filter: filterOnAirport |
    filter: filterFuelPolicy |
    filter: filterUnlimitedMileage |
    filter: filterFreeCancellation |
    filter: filterTheftProtection |
    filter: filterCDW |
    filter: filterTaxesIncluded |
    filter: filterProviders)
    .length}}

which is a bit of a mouthful but does return the number I want. How can I pass this to a $scope ?

Daniel
  • 3,541
  • 3
  • 33
  • 46
Leads
  • 839
  • 2
  • 10
  • 27

1 Answers1

43

You can create an intermediate variable that will hold the filtered array:

data-ng-repeat="result in filteredResults = (results | filter:filterPrice | filter:filterCarCategories | etc.)"

and then can use:

filteredResults.length
Gruff Bunny
  • 27,738
  • 10
  • 72
  • 59
  • Hi Gruff Bunny, I did have something similar to that, see first bit of the code. I've just tried your version but get this error: Error: [ngRepeat:dupes] – Leads Jan 27 '14 at 11:43
  • I assumed I had to setup a $scope.filteredResults, so did so. – Leads Jan 27 '14 at 11:44
  • Have you got track by $index at the end of the expression (to cope with duplicates)? – Gruff Bunny Jan 27 '14 at 13:15
  • got it here:
    It's now not throwing an error but filteredResults.length returns the total results array, and doesn't change after a filter is applied. I'll knock up a demo...
     – Leads Jan 27 '14 at 13:41
  • Actually, it returns the correct amount if I moved the bracket to a different place
    – Leads Jan 27 '14 at 13:52
  • Sorry, I've made a mistake here. You're version works, so I'll mark it as the right answer. I get the dupes issue with something to do with my pagination. – Leads Jan 27 '14 at 13:53