So, I am using AngularJS and I am having an issue with making a function occur when I start to type in a search box. Basically, the function is going to filter the table based on the name of the class. Everything shows up, but the “ng-keyup” appears to not be working.
I was hoping I could get some help here since this is my first Meteor project.
addClass.html
<!-- filter -->
<div class="input-group">
<input type="text" id="searchForClasses" class="form-control" ng-keyup="filterClasses()" placeholder="Search for Classes to Add..." aria-describedby="basic-addon2">
<span class="input-group-addon" id="basic-addon2"><span class=" glyphicon glyphicon-search"></span></span>
</div>
<!-- endfilter -->
<table id="classes" class="table table-hover">
<tr>
<td><span class="badge pull-left">3</span> Data Structures</td>
<td>CS-310</td>
<td>Teacher</td>
</tr>
<tr>
<td><span class="badge pull-left">3</span> Ethics</td>
<td>CS-440</td>
<td>Teacher</td>
</tr>
<tr>
<td><span class="badge pull-left">3</span> Programming</td>
<td>CS-320</td>
<td>Teacher</td>
</tr>
</table>
addClass.js
import angular from 'angular';
import angularMeteor from 'angular-meteor';
import template from './addClass.html';
class addClassCtrl {
constructor($scope) {
$scope.viewModel(this);
this.helpers({
filterClasses() {
// Declare variables
var input, filter, table, tr, td, i;
input = document.getElementById("searchForClasses");
filter = input.value.toUpperCase();
table = document.getElementById("classes");
tr = table.getElementsByTagName("tr");
// Loop through all table rows, and hide those who don't match the search query
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[1];
if (td) {
if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}
});
}
}
export default angular.module('addClass', [
angularMeteor
])
.component('addClass', {
templateUrl: 'imports/components/semesters/addClass.html',
controller: ['$scope', addClassCtrl]
});