要NG重複對象傳遞給自定義濾鏡功能

Question

目的：

用戶應該能夠輸入到搜索領域的課程名稱，看看誰是登記的學生名單課程。

型號：

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

方法：

通過學生對象的列表NG重複。對於每個學生對象，將對象傳遞給自定義過濾器函數filterByCourse(byCourse, student)。

即將實施： filterByCourse函數遍歷student.courses。如果找到與課程名稱或代碼相同的課程，則將其添加到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-重複通過每個學生對象的課程列表進行迭代，但無法弄清楚如何做到這一點。

• 我試過用錘子敲擊東西。

進一步的問題：

我只希望如果用戶輸入一些字符串到輸入字段通過這種方式來篩選結果。如果輸入字段爲空，則不應觸發過濾功能。我不知道該怎麼做！

Answer 1

選項1：

你正在嘗試創建稱爲謂詞函數。你可以閱讀起來就可以了here（只是滾動到function(value, index, array)）

謂詞函數可用於寫入任意過濾器。該函數是爲數組的每個元素調用的，元素，索引和整個數組本身都是參數。

最終的結果是這些元素的數組的謂詞

返回屬實，請參見工作示例here

如果你輸入「當然」，你會看到兩個學生，如果你輸入「course1」你只會看到第一個學生。

<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

您可以使用對象爲filter expression（滾動的課程代碼 「CC1」

HTML同樣的罪名對象：模式ob ...），請參閱工作示例here

模式對象可用於過濾數組所包含對象的特定屬性。例如{名稱：「M」，電話：「1」}謂詞將返回一個包含屬性名稱包含「M」和屬性手機包含「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' 
    }] 
    }]; 
}]); 

如果不需要自定義代碼或先進的過濾，我選擇選項2

Answer 2

功能

filterByCourse 

只應在HTML中稱爲「byCourse」，和它的實現應該只接收參數「byCourse」。此功能也應該返回接收學生對象的功能。 所以你的HTML應該

<ul ng-repeat="student in students | filter: filterByCourse(byCourse)"> 

，並在JavaScript應該

$scope.filterByCourse = function (byCourse) { 
    return function (student) { 
     console.log(student); 
    } 
}; 

（即過濾器返回將有機會獲得byCourse參數的Cuz功能及其在同樣的情況下） 。 這裏是一個工作jsFiddle