angular js ng-click not firing

Question

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/

Michel · Accepted Answer · 2015-11-04 21:27:56Z

3

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()".

edited Nov 4, 2015 at 21:27

answered Nov 4, 2015 at 21:14

Michel

28.6k6 gold badges67 silver badges72 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Tj Gienger Over a year ago

on your ng-click you needed the parens = ng-click="submitbutton()"

user525146 Over a year ago

@TjGienger If the div <div ng-app="nameApp" ng-controller="nameCntrl"> is added later dynamically on click, can I be able to call the angular.module because the javascript is loaded when the html is loaded, but the div is not loaded at the time when the page is loaded ?

Tj Gienger Over a year ago

@user525146 can you clarify as to why you would be adding it dynamically?

user525146 Over a year ago

@TjGienger i have a table and in the first column I have a button to click, i do an ajax call to load further details like below and I want them to be editable to update the values. legacy.datatables.net/release-datatables/examples/api/…

Alex · Accepted Answer · 2015-11-04 21:27:16Z

1

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>

edited Nov 4, 2015 at 21:27

answered Nov 4, 2015 at 21:21

Alex

21.9k11 gold badges68 silver badges77 bronze badges

3 Comments

user525146 Over a year ago

If the div <div ng-app="nameApp" ng-controller="nameCntrl"> is added later dynamically on click, can I be able to call the angular.modulec because the javascript is loaded when the html is loaded, but the div is not loaded at the time when the page is loaded ?

Alex Over a year ago

You can't add the ng-app statement later dynamically, it needs to be there when the document is loaded.

user525146 Over a year ago

i have a table and in the first column I have a button to click, i do an ajax call to load further details like below and I want them to be editable to update the values. http://legacy.datatables.net/release-datatables/examples/api/row_details.html

Collectives™ on Stack Overflow

angular js ng-click not firing

2 Answers 2

4 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related