0

I am trying to do something similar to what this question is doing, getting the length and totals of my filtered results.

HTML:

<div ng-app="app" ng-controller="controller">
  <div class="col-md-4 ">Filter: <input class="form-control" ng-model="dataFilter" placeholder="filter" /></div>
  <div class="col-md-4 ">Total:  {{filtered.length}}</div>
  <table class="table table-hover" ts-wrapper>
    <thead>
      <tr>
        <th ts-criteria="policy.policy_number | parseInt">
          Policy
        </th>
        <th ts-criteria="sales_rep.name">
          Sales Rep
        </th>
        <th ts-criteria="policy.customer.full_name">
          Customer
        </th>
        <th ts-criteria="type">
          Type
        </th>
        <th ts-criteria="change_amt | parseFloat">
          Change Amount
        </th>
        <th ts-criteria="effective_date | date">
          Effective Date {{filtered.length}}
        </th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="transaction in filtered = (data | filter: dataFilter )" ts-repeat>
        <td>{{transaction.policy.policy_number}}{{pizza}}</td>
        <td>{{transaction.sales_rep.name}}</td>
        <td>{{transaction.policy.customer.full_name}}</td>
        <td>{{transaction.transaction_type}}</td>
        <td>${{transaction.change_amt | number:currency}}</td>
        <td>{{transaction.effective_date | date}}</td>
      </tr>
    </tbody>
  </table>
</div>

The JS really has nothing specific to this. In the above example {{filtered}} displays the filtered results as expected only when within the table (in the <th> in this case). When I try to get the length up above in the div, it returns nothing.

Is some kind of isolated scope being created here? My code appears to match the example the SO question had that I linked above so how come they can access that variable in other elements and I cannot?

Community
  • 1
  • 1
Aarmora
  • 1,143
  • 1
  • 13
  • 26
  • 1
    You should rather use `transaction in data | filter:dataFilter as filtered` anyway. – JB Nizet Jan 22 '16 at 23:26
  • 1
    I suspect issue has something to do with whatever `ts-wrapper` does. Probably causing scope issues – charlietfl Jan 22 '16 at 23:31
  • @JBNizet Why? Doing so with your syntax gives me `[ngRepeat:badident] alias 'filtered | tablesortOrderBy:sortFun' is invalid --- must be a valid JS identifier which is not a reserved name.` I've not seen this format. I'm up for new things but I don't understand the difference. – Aarmora Jan 22 '16 at 23:32
  • @Aarmora what version are you using ...the alias was added around `1.4`. ALso what does `ts-wrapper` do? – charlietfl Jan 22 '16 at 23:33
  • @charlietfl The `ts-wrapper` was exactly it. I moved it out to my controller element and it worked like a charm. I knew it must have been something silly. I'm using `1.4.8`. – Aarmora Jan 22 '16 at 23:35
  • Also, the error messages makes reference to a sub-expression `'| tablesortOrderBy:sortFun'` that appears nowhere in the posted code. Post REAL code, and read https://code.angularjs.org/1.4.8/docs/api/ng/directive/ngRepeat. – JB Nizet Jan 22 '16 at 23:36
  • @JBNizet Chillax, friend. It's the interaction with the table sort module. http://mattiash.github.io/angular-tablesort/. Same thing that was causing my original issue. – Aarmora Jan 22 '16 at 23:38
  • check this http://stackoverflow.com/questions/34943888/angular-filter-with-controlleras-syntax-not-working/34944264?noredirect=1#comment57620350_34944264 – Poyraz Yilmaz Jan 23 '16 at 01:01

0 Answers0