2015-12-09 119 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的方法。這應該解決你的例外。