Helper Functions? I'm Stuck...AngularJS


#1

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>&nbsp; Data Structures</td>
            <td>CS-310</td>
            <td>Teacher</td>
          </tr>
          <tr>
            <td><span class="badge pull-left">3</span>&nbsp; Ethics</td>
            <td>CS-440</td>
            <td>Teacher</td>
          </tr>
          <tr>
            <td><span class="badge pull-left">3</span>&nbsp; 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]
    });