want to pass ng-repeat object to custom filter function

Question

Aim:

A user should be able to type into the search field the name of a course, and see a list of students who are registered on that course.

Models:

course (has a course name and course code)
student (has a list of registered courses)
students (an array of student objects)

Method:

ng-repeat through a list of student objects. For each student object, pass object to a custom filter function filterByCourse(byCourse, student).

To be implemented: filterByCourse function iterates through student.courses. If a course with the same name or code as byCourse is found, this is added to a list of filteredStudents. pass the filteredStudents list to the view in place of the unfiltered list of students.

Here's the code:




        

            
            {{ student.first_name }} {{ student.last_name }} 
                {{ student.role }}
                
            
            {{ student._id }}

The Problem:

When I pass the student object into filterByCourse, a console.log on the first line shows that student is undefined, so I can't iterate through the courses and return a list of filtered students as I'd like to.

scope.filterByCourse = function(course, student){
    console.log(student); //student is undefined
}

Things I've tried:

I've tried to use the filter function in the ng-repeat to iterate through each student object's course list but cannot figure out how to do it.
I've tried hitting things with hammers.

Further problem:

I only wish to filter the results in this way if the user has entered some string into the input field. If the input field is empty the filter function should not be triggered. I have no idea how to do this bit!

Tjaart van der Walt · Accepted Answer

Option 1:

What you are trying to create is called a predicate function. You can read up on it here(just scroll to function(value, index, array))

A predicate function can be used to write arbitrary filters. The function is called for each element of the array, with the element, its index, and the entire array itself as arguments.

The final result is an array of those elements that the predicate returned true for

Please see working example here

If you type in "course" you will see both students, if you type "course1" you will only see the first student. The same counts for the course code "CC1"

HTML:


  
    
      
    
  
  Students
    
      
      {{student.firstName}} {{student.surname}}
        
          
            {{course.courseName}}-{{course.courseCode}}

JS:

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

myApp.controller('TestController', ['$scope', function($scope) {
  $scope.students = [{
    firstName: 'John',
    surname: 'Doe',
    courses: [{
      courseName: 'course1',
      courseCode: 'CC1'
    }, {
      courseName: 'course2',
      courseCode: 'CC7'
    }]
  }, {
    firstName: 'Jane',
    surname: 'Doe',
    courses: [{
      courseName: 'course3',
      courseCode: 'CC2'
    }, {
      courseName: 'course4',
      courseCode: 'CC3'
    }]
  }];

  $scope.onFilterStudents = function(value, index, array) {
    if ($scope.studentFilter === '' || $scope.studentFilter === null || $scope.studentFilter === undefined) {
      return true;
    }    
    return value.courses.filter(function(course) {
    console.log(course);
      return course.courseName.toLowerCase().indexOf($scope.studentFilter.toLowerCase()) > -1 || course.courseCode.toLowerCase().indexOf($scope.studentFilter.toLowerCase()) > -1;
    }).length > 0;
  };
}]);

Option 2

You can use a object as the filter expression(scroll to Object: A pattern ob...), please see working example here

A pattern object can be used to filter specific properties on objects contained by array. For example {name:"M", phone:"1"} predicate will return an array of items which have property name containing "M" and property phone containing "1". A special property name $ can be used (as in {$:"text"}) to accept a match against any property of the object or its nested object properties. That's equivalent to the simple substring match with a string as described above. The predicate can be negated by prefixing the string with !. For example {name: "!M"} predicate will return an array of items which have property name not containing "M".

HTML:


  
    
      
    
  
  Students
  
    
      {{student.firstName}} {{student.surname}}
      
        
          {{course.courseName}}-{{course.courseCode}}

JS:

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

myApp.controller('TestController', ['$scope', function($scope) {
  $scope.students = [{
    firstName: 'John',
    surname: 'Doe',
    courses: [{
      courseName: 'course1',
      courseCode: 'CC1'
    }, {
      courseName: 'course2',
      courseCode: 'CC7'
    }]
  }, {
    firstName: 'Jane',
    surname: 'Doe',
    courses: [{
      courseName: 'course3',
      courseCode: 'CC2'
    }, {
      courseName: 'course4',
      courseCode: 'CC3'
    }]
  }];  
}]);

If no custom code or advanced filtering is required, I opt for option 2

want to pass ng-repeat object to custom filter function

Answers (2)

Related Questions