AngularJS function not defined

Question

So I have an html page that should dynamically make table data appear using AngularJS and smart-table. This a quick summary of what it looks like:

<body ng-app="startApp">
    <div ng-controller="employeeCtrl">
        <tbody>
            <tr>
                <td>
                    <input type="text" id="FirstName" size="10" onkeyup="searchEmp()" /></td>
                </td>
            </tr>
...
<div ng-controller="employeeCtrl">
    <table st-table="employeesCollection" st-safe-src="employeesCollection" class="table table-striped">
        <tbody>
            <tr ng-repeat="employee in employeesCollection">
                <td>{{employee.first}}</td>
            </tr>
        </tbody>
...

And I have AngularJS code that does a simple $http get request and return a dataset.

var app = angular.module('startApp', ['smart-table']);

app.controller('employeeCtrl', ['$scope', '$http',
    function ($scope, $http) {

        var first = document.getElementById("FirstName").value;
        var last = document.getElementById("LastName").value;
        var ex = document.getElementById("Extension").value;
        var store = document.getElementById("store");
        var st = store.options[store.selectedIndex].value;
        var number = document.getElementById("storeNo");
        var num = number.options[number.selectedIndex].value;

        $scope.searchEmp = function () {
            $http({
                method: 'GET',
                url: 'getEmployees.aspx',
                params: { f: first, q: last, e: ex, s: st, n: num }
            }).then(function (response) { $scope.employeesCollection = response.data });
        };
    }]);

For some reason no matter how I define the function searchEmp whether be like above or like function searchEmp() {...} it is always undefined. I don't know what I'm doing wrong. It looks like every other function I've ever made in AngularJS but it won't work.

The exact error I'm getting is this:

Uncaught ReferenceError: searchEmp is not defined
    onkeyup @ Startup.aspx.83

Why are you using onkeyup when you have Angular? Have you tried using ngKeypress? — tymeJV
– tymeJV, Commented Dec 9, 2015 at 16:43

toddmo · Accepted Answer · 2015-12-09 16:48:39Z

Try this, using ng-keyup instead of keyup.

var app = angular.module('startApp', ['smart-table']);

app.controller('employeeCtrl', ['$scope', '$http',
  function($scope, $http) {

    var first = document.getElementById("FirstName").value;
    var last = document.getElementById("LastName").value;
    var ex = document.getElementById("Extension").value;
    var store = document.getElementById("store");
    var st = store.options[store.selectedIndex].value;
    var number = document.getElementById("storeNo");
    var num = number.options[number.selectedIndex].value;

    $scope.searchEmp = function() {
      $http({
        method: 'GET',
        url: 'getEmployees.aspx',
        params: {
          f: first,
          q: last,
          e: ex,
          s: st,
          n: num
        }
      }).then(function(response) {
        $scope.employeesCollection = response.data
      });
    };
  }
]);

<body ng-app="startApp">
  <div ng-controller="employeeCtrl">
    <tbody>
      <tr>
        <td>
          <input type="text" id="FirstName" size="10" ng-keyup="searchEmp()" />
        </td>
        </td>
      </tr>
    </tbody>
  </div>
  <div ng-controller="employeeCtrl">
    <table st-table="employeesCollection" st-safe-src="employeesCollection" class="table table-striped">
      <tbody>
        <tr ng-repeat="employee in employeesCollection">
          <td>{{employee.first}}</td>
        </tr>
      </tbody>
    </table>
  </div>
</body>

Pascal Winter · Accepted Answer · 2015-12-09 16:49:52Z

0

As tymeJV pointed out, onkeyup is a javascript event. You should use ngKeypress which will look for the method on $scope. That should fix your exception.

answered Dec 9, 2015 at 16:49

Pascal Winter

1142 bronze badges

Collectives™ on Stack Overflow

AngularJS function not defined

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related