CODEWITHSUNDEEP
javascriptangularjs
packetie
packetie

Reputation: 5069

Clickable cell in Angularjs

I can create clickable cells in pure js, but it doesn't work when trying to do something simple using angularjs: when clicking on the cell, it complained dum function doesn't exit. Any idea why? 

<!DOCTYPE html>
<html>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="customersCtrl"> 

<table>
  <tr ng-repeat="x in names">
    <td onclick="dum();">{{ x.Name }}</td>
    <td>{{ x.Country }}</td>
  </tr>
</table>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
    $http.get("http://www.w3schools.com/angular/customers.php")
    .success(function (response) {$scope.names = response.records;});
    $scope.dum = function() { alert("hi you"); }
});

</script>

</body>
</html>

Upvotes: 2

Views: 887

Answers (1)

PSL
PSL

Reputation: 123749

Javascript onclick event binding will work, but you do not have a function named dum in the global scope.

It would work if you were to do in your html, for example:

<script>
 function dum(){
   alert('test')
 }
</script>

In angular world you would need to use ng-click instead, so that the bound function expression is evaluated against the scope. ng-click is just a built-in directive that binds click event internally and performs a digest cycle after evaluating the function expression bound to it. Example

Upvotes: 3

Related Questions