想要将ng-repeat对象传递给自定义过滤器功能

Julian Blair 发表于 Dev

朱利安·布莱尔（Julian Blair）

目的：

用户应该能够在搜索字段中输入课程名称，并查看在该课程中注册的学生的列表。

楷模：

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

方法：

ng-repeat通过一系列学生对象。对于每个学生对象，将对象传递给自定义过滤器函数filterByCourse(byCourse, student)。

要实现： filterByCourse函数遍历student.courses。如果找到与byCourse具有相同名称或代码的课程，则该课程将添加到filteredStudents列表中。将filteredStudents列表传递到视图，以代替未过滤的学生列表。

这是代码：

<input class="form-control" type="text" ng-model="byCourse"
placeholder="Search by course id or course name..">

<ul ng-repeat="student in students | filter: filterByCourse(byCourse, student)">
        <li ng-init="index=0; classes=['list--students_item', 'list--students_item--active']" ng-click="stageMeToCourse($index)" 
            ng-class="classes[index % classes.length]" 
            class="col-xs-24">

            <img src="/img/profile_default.png">
            <h4>{{ student.first_name }} {{ student.last_name }} 
                <span class="role">{{ student.role }}</span>
                <i class="fa fa-chevron-right"></i>
            </h4>
            <p class="student_nr">{{ student._id }}</p>
        </li>
    </ul>
</div><!--list-students-->

问题：

当我将学生对象传递到filterByCourse时，第一行的console.log显示该学生是未定义的，因此我无法遍历课程并按我的意愿返回已过滤学生的列表。

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

我尝试过的事情：

我试图在ng-repeat中使用过滤器功能来遍历每个学生对象的课程列表，但无法弄清楚该如何做。
我试过用锤子敲东西。

进一步的问题：

如果用户在输入字段中输入了一些字符串，我只希望以这种方式过滤结果。如果输入字段为空，则不应触发过滤器功能。我不知道该怎么做！

贾特·范德华特

选项1：

您尝试创建的内容称为谓词函数。您可以在这里阅读（只需滚动至function(value, index, array)）

谓词功能可用于编写任意过滤器。为数组的每个元素调用该函数，并将该元素，其索引以及整个数组本身作为参数。

最终结果是谓词为其返回true的那些元素的数组

请在这里查看工作示例

如果您输入“ course”，您将看到两个学生，如果您输入“ course1”，您将只会看到第一个学生。课程代码“ CC1”的计数相同

HTML：

<div ng-controller="TestController" class="panel panel-primary">
  <form class="form-inline">
    <div class="form-group">
      <input type="text" class="form-control" placeholder="Filter" ng-model="studentFilter">
    </div>
  </form>
  <div class="panel-heading">Students</div>
    <ul class="list-group">
      <li class="list-group-item" ng-repeat="student in students | filter:onFilterStudents">
      {{student.firstName}} {{student.surname}}
        <ul class="list-group">
          <li class="list-group-item" ng-repeat="course in student.courses">
            {{course.courseName}}-{{course.courseCode}}
          </li>
        </ul>
     </li>
  </ul>
</div>

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;
  };
}]);

选项2

您可以将一个对象用作过滤器表达式（滚动到“ Object：A pattern ob ...”），请参见此处的工作示例

模式对象可用于过滤数组包含的对象上的特定属性。例如，{name：“ M”，phone：“ 1”}谓词将返回一组属性名称包含“ M”且属性phone包含“ 1”的项目。可以使用特殊的属性名称$（如{$：“ text”}中所示）接受与对象的任何属性或其嵌套对象属性的匹配。这等效于如上所述的简单子字符串与字符串的匹配。可以通过在字符串前面加上！来否定谓词。例如，{name：“！M”}谓词将返回属性名称不包含“ M”的项的数组。

HTML：

<div ng-controller="TestController" class="panel panel-primary">
  <form class="form-inline">
    <div class="form-group">
      <input type="text" class="form-control" placeholder="Filter" ng-model="studentFilter">
    </div>
  </form>
  <div class="panel-heading">Students</div>
  <ul class="list-group">
    <li class="list-group-item" ng-repeat="student in students | filter:{courses:{$:studentFilter}}">
      {{student.firstName}} {{student.surname}}
      <ul class="list-group">
        <li class="list-group-item" ng-repeat="course in student.courses">
          {{course.courseName}}-{{course.courseCode}}
        </li>
      </ul>
    </li>
  </ul>
</div>

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'
    }]
  }];  
}]);