CODEWITHSUNDEEP
javascriptangularjs
user525146
user525146

Reputation: 4008

angular js ng-click not firing

I don't understand where I made a mistake.

<div ng-app="nameApp" ng-controller="nameCntrl">
    <table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">
      <thead><tr><th>Name</th><th>Value</th></tr></thead><tbody>  
        <tr><td>Chris </td> 
            <td><input type="text" size="4" ng-model="numDays"/>&nbsp;
                <input type="button" value="submit"  ng-click="submitbutton"/></td></tr>


    </table>
        {{numDays}}
</div>

var app = angular.module('nameApp', []);
app.controller('nameCntrl',function($scope) {
    console.log($scope);
    $scope.numDays = 5;

    $scope.submitbutton = function() {
        alert($scope.numDays);
    }
});

http://jsfiddle.net/srvdfv6y/1/

Upvotes: 0

Views: 82

Answers (2)

Michel
Michel

Reputation: 28359

The application you wrote is correct, just beware to load angular script before the event DOM ready.

See updated fiddle

Also, as noticed by @TjGienger, ng-click="submitbutton" should be ng-click="submitbutton()".

Upvotes: 3

Alex
Alex

Reputation: 21766

You need to specify submitbutton() as ng-click statement

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script>
  var app = angular.module('nameApp', []);
  app.controller('nameCntrl', function($scope) {
    console.log($scope);
    $scope.numcDays = 5;
    $scope.myValue = true;


    $scope.submitbutton = function() {
      alert($scope.numcDays);
      $scope.myValue = false;
    }
  });
</script>

<body>
  <div ng-app="nameApp" ng-controller="nameCntrl">
    <table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">
      <thead>
        <tr>
          <th>Name</th>
          <th>Value</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Chris</td>
          <td>
            <input type="text" size="4" ng-model="numDays" />
            <input type="button" value="submit" ng-click="submitbutton()" />
          </td>
        </tr>
    </table>{{numDays}}
    <div ng-hide="myValue">Answer submitted</div>
  </div>
</body>

Upvotes: 1

Related Questions