2015-12-09 87 views
0

所以我有一个html页面应该动态地使表格数据出现使用AngularJS和智能表。什么它看起来像这样的快速摘要:AngularJS函数没有定义

<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> 
... 

我有AngularJS代码,做了简单的$ HTTP GET请求,并返回一个数据集。

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

出于某种原因,不管我怎么定义函数searchEmp是否像上述或类似function searchEmp() {...}它始终是不确定的。我不知道我做错了什么。它看起来像我曾经在AngularJS中做过的其他函数,但它不起作用。

我得到确切的错误是这样的:

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

为什么你在使用Angular时使用'onkeyup'?你有没有尝试过使用'ngKeypress'? – tymeJV

回答

1

试试这个,使用ng-keyup代替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>

0

正如tymeJV指出的那样,是的onkeyup JavaScript事件。你应该使用ngKeypress来查找$ scope的方法。这应该解决你的例外。