Angularjs - How to Get an Ngrepeat Filtered Result Reference

AngularJS - how to get an ngRepeat filtered result reference

UPDATE: Here's an easier way than what was there before.

 <input ng-model="query">
 <div ng-repeat="item in (filteredItems = (items | orderBy:'order_prop' | filter:query | limitTo:4))">
   {{item}}
 </div>

Then $scope.filteredItems is accessible.

Angular js: Access data filtered in ng-repeat (ngRepeat) from controller

I'm not entirely sure, but you can use the filter function in your controller. So try something like:

$scope.$watch('query.gender', function(newValue, oldValue) {
        var x = $filter('filter')($scope.persons, $scope.query);
});

x should then contain the same filtered data as in your table I think. Have a look at the docs here: http://docs.angularjs.org/api/ng.filter:filter for some more info.

AngularJS: get filtered ng-repeat result count to update my pagination

You can use a $watch with a controllerAs syntax in the controller. I know you said it's not your priority, but I think it might be your best solution. It will look something like this:

.controller('myCtrl', function () {
    var ctrl = this;
    ...
    $scope.$watch(angular.bind(this, function () {
      return this.results.length;
    }), function (newVal) {
        ctrl.paginationTotalItems = //whatever logic you have
    });
    ....
});

Edit: Ok so I've just thought of another way that you don't have to use $scope. It includes a function on your controller, and calling it using ng-init which will update your variable (ng-init will fire everytime the iterated list changes):

So after much simplification, your controller will look like this:

function MyCtrl() {
    var ctrl = this;
    ctrl.paginationTest = 1;
    ctrl.persons = [1,2,3,4,5];

    ctrl.calcPagination = function () {
        ctrl.paginationTest = Math.floor(Math.random() * 10);
    }
}

And the HTML will be:

<table>
          <input ng-model="searchKeywords"/>
        <tr ng-repeat="result in ctrl.results = (ctrl.persons | filter:searchKeywords)" ng-init="ctrl.calcPagination()">

            <td>{{ result }}</td>
            <td>{{ctrl.paginationTest}}</td>
        </tr>
    </table>

Here's a Fiddle, take a look at the 2nd column, and see that it changes after every change in the input element. In your case you'll just recalculate ctrl.paginationTotalItems.

AngularJS Filter for ng-repeat, how to get access to the filtered data

Ok, so the error was caused by the new array which was being created each time applyFilter was invoked. I am not sure why an actual filter works (i.e. in the view) rather than in the function because they are doing the same thing ?!
But I was able to get around this issue by using angular.equals. First when I get the data, I had to store the result into a separate array, then when I invoke my filter I can use the unmodified array.

// Get our report
provider.overdueCollections().then(function (response) {
    self.models = response;
    self.list = response;
    self.predicate = 'center';
    self.chartData = provider.getOverdueData(response);
});

Once that was done, the table used self.list as it's datasource, but the applyFilter used the self.models to apply the filter to. It now looks like this:

// Apply our filter
self.applyFilter = function () {

    // Create our filtered list
    var filteredList = $filter('filter')(self.models, self.filter);

    // Check to see if we are the same as the current list
    var isSame = angular.equals(self.list, filteredList)

    // If we are not the same
    if (!isSame) {

        // Update our scope
        self.list = filteredList;
        self.chartData = provider.getOverdueData(filteredList);
    }
};

This meant that the data was only applied to the scope if it changed.

Determining how many results are shown by ng-repeat filter

Please see here http://jsbin.com/xuyuy/1/edit

In your repeater you can create new array ie : personsfiltered

ng-repeat="person in personsfilterd = (persons | filter : search )

and after that just display length of orignal array and filtered array :

Showing {{personsfilterd.length}} of {{persons.length }} results

Full code here:

var app = angular.module('app', []);

app.controller('fCtrl', function($scope) {

  $scope.persons = [
    'Mike', 'Tom', 'Tim', 'Jim', 'Ken'
  ]

});

 <div ng-app="app">
    <div ng-controller="fCtrl">
      <input type="text" ng-model = "search"> Showing {{personsfilterd.length}} of {{persons.length }} results
      <li ng-repeat="person in personsfilterd = (persons | filter : search )">{{person}}</li>
    </div>
    </div>

Filter a list with ng-repeat

The problem with your custom filter is that, parameter of your custom filter function is a row from your list not selected age value. So changing your custom filter with the following should solve the issue.

  $scope.filterByAge = function(row)
  {
      if(row.age == $scope.selAge)
      {
          return true;
      }
      else
      {
          return false;
      } 
  }

In order to display whole list on start you can add a null check.

 $scope.filterByAge = function(row)
  {
      if($scope.selAge != undefined){
          if(row.age == $scope.selAge)
          {
              return true;
          }
          else
          {
              return false;
          } 
      }
      else{
        return true;
      }
  } 

Demo

Using ng-repeat and filter, how to tell which items are visible?

You can bind the filtered array to another scope variable in your view, then access that in your controller.

View:

<tr ng-repeat="item in filteredItems = (items | filter:searchValue)">
  ...
</tr>

Controller:

$scope.toggleAll = function () {
  angular.forEach($scope.filteredItems, function (item) {
    // do stuff
  })
}

Pre-count filtered results in an ng-repeat

Not knowing exactly what the data model looks like I can't say if you need a custom filter. But for a simple data model you should be able to use a simple filter like so:

<ul>
<li ng-repeat="item in items">
<a ng-click="filter(item.type)">{{item.name}} {{(allData | filter:item.type).length}}</a>
</li>
</ul>

Here is a working example http://codepen.io/mkl/pen/GqpqYN

---

Related Topics