Can't access the variable from newly created filter variable of ng-repeat in angular

Question

I have a ng-repeat like this :

<a class="item item-avatar" ng-click="loadProfile({{student.pi_id}})" 
ng-repeat="student in filteredStudents = (students | filter:model.txtSearch)" >
            <img src="./img/man.png">
            <h2>{{student.pi_name}}</h2>
            <p>{{student.pi_hp}}</p>

        </a>

the question is how can I access the filteredStudents variable? as I can't access it by using $scope.filteredStudents; in the controller

Please show how you intend to use `filteredStudents` in the controller. — Brendan Green, Jun 17 '15 at 04:25
If you want to use filteredStudents in controller, then do the filtering in the controller. — Arghya C, Jun 17 '15 at 04:36
I just want to access it so for instance I want to return the length of the filteredStudents thus, I wrote console.log($scope.filteredStudents.length); but, it returns null. @ArghyaC : any link or example of that? — Bilal Bayasut, Jun 17 '15 at 04:38

score 0 · Answer 1 · answered Jun 17 '15 at 04:40

When you are applying the filter in view the filtered value is not accessible in controller.

If you need the filtered data in your controller you need to do filtering in your controller like:

$scope.filteredData = $filter('filter')($scope.filteredStudents, $scope.model.txtSearch)

score 0 · Answer 2 · edited May 23 '17 at 12:05

0

Inject filter in your controller

function YourController($scope, $filter)
{
}

then, use the filter in controller itself

$scope.filteredStudents = $filter('yourFilterName')(model.txtSearch);

then in html,

<a class="item item-avatar" ng-click="loadProfile({{student.pi_id}})" ng-repeat="student in filteredStudents" >...</a>

Check this SO question

edited May 23 '17 at 12:05

Community

1
1

answered Jun 17 '15 at 04:45

Arghya C

9,805
2
47
66

i don't understand what should be my filtername in my code? ng-repeat="student in filteredStudents = (students | filter:model.txtSearch)" – Bilal Bayasut Jun 17 '15 at 04:48
I tried it but it says $filter is not a function my code is : $scope.filteredStudents = $filter('filter')(model.txtSearch); – Bilal Bayasut Jun 17 '15 at 04:53
Did you inject filter in your controller? – Arghya C Jun 17 '15 at 04:54
Yes, what did I do wrong? app_ctrl.controller('BrowseController',['$scope','$state', 'studentService', '$localstorage','$filter', function($scope, $state, studentService,$localstorage, $timeout, $filter) { } – Bilal Bayasut Jun 17 '15 at 04:55
Can you try rearranging injected variables once. timeout & filter. – Arghya C Jun 17 '15 at 05:04

score 0 · Answer 3 · answered Jun 17 '15 at 04:56

Controllers execute before the view is rendered, which is why the controller function $scope is empty when it executes. You could access the $scope.filteredStudents from within an event handler, such as ngClick:

var app = angular.module('app',[]);
app.controller('ctrl', function($scope) {
    $scope.test = function() {
      alert ($scope.items);
    }
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="app" ng-controller="ctrl">
  <input type="text" ng-model="name" /> {{name}}
  <div ng-repeat="i in items = ([1,2,3,4] | filter:name )">
    {{i}}
  </div>
  <button ng-click="test()">Hey</button>
</div>

Alternatively, you can access $scope.filteredStudents by using $timeout:

app.controller('ctrl', function($scope,$timeout) {
     $timeout(function() {
         // $scope.filteredStudents is accessible here...
         alert($scope.filteredStudents);
     });
});

This works because the $timeout hander executes after the view is rendered. The javascript enclosure allows the $timeout handler to execute, and still access the controller's function context.

Can't access the variable from newly created filter variable of ng-repeat in angular

3 Answers3