angularjs: ng-click not working

Question

Here its my html code

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>

<body ng-app="chat">
    <div ng-controller="chatCtrl">
        <div ng-repeat="i in chatResult">
            {{i.first_name}}
            {{i.last_name}}
            {{i.id}}
            {{i.age}}
        </div>
        <input type="text" ng-model="message">{{message}}
        <input type="text" ng-model="username">{{username}}
        <button ng-click="saveData()">Submit</button>
    </div>
    <script src="static/jquery.js"></script>
    <script src="static/angular.min.js"></script>
    <script src="static/app.js"></script>
</body>
</html>

In above html code when I'm press submit button ng-click function not respond.

here its my app.js

var chat = angular.module('chat', [])

chat.controller('chatCtrl', function($scope,$http){
    $scope.chatResult = null;
    $http.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencsoded";
    $http.get('http://localhost:3000/chat').success(function(result){
        $scope.chatResult = result;
    });

    $scope.message = '';
    $scope.username = '';
    $scope.saveData = function(){
        $console.log('save data function');
        $http.post('http://localhost:3000/save/chat/data', {message:$scope.message, username:$scope.username}).
        success(function(result){
            $console.log(result);
        });
    }
});

When the submit button is clicked, I call an angular click event to trigger the saveData function.

but it's not working in my case any problem in my code...

what you mean not working?

Grundy
– Grundy

2015-08-13 17:16:39 +00:00
Commented Aug 13, 2015 at 17:16 — Grundy
– Grundy, Commented Aug 13, 2015 at 17:16
saveData function not calling when I'm press submit button.

NIKHIL RANE
– NIKHIL RANE

2015-08-13 17:17:35 +00:00
Commented Aug 13, 2015 at 17:17 — NIKHIL RANE
– NIKHIL RANE, Commented Aug 13, 2015 at 17:17
try add type="button" to your button tag

Grundy
– Grundy

2015-08-13 17:18:07 +00:00
Commented Aug 13, 2015 at 17:18 — Grundy
– Grundy, Commented Aug 13, 2015 at 17:18
@Grundy no its not working.

NIKHIL RANE
– NIKHIL RANE

2015-08-13 17:19:45 +00:00
Commented Aug 13, 2015 at 17:19 — NIKHIL RANE
– NIKHIL RANE, Commented Aug 13, 2015 at 17:19
try see errors in browser console

Grundy
– Grundy

2015-08-13 17:22:17 +00:00
Commented Aug 13, 2015 at 17:22 — Grundy
– Grundy, Commented Aug 13, 2015 at 17:22

Grundy · Accepted Answer · 2015-08-13 17:24:45Z

5

I think it is being called, actually, but I'm not sure about the $console.log. I changed it to just console.log and I see the function logging each time I click the button. Check it out:

http://plnkr.co/edit/BNuZUe?p=preview

var chat = angular.module('chat', [])

chat.controller('chatCtrl', function($scope,$http){
    $scope.chatResult = null;
    $http.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencsoded";
    $http.get('http://localhost:3000/chat').success(function(result){
        $scope.chatResult = result;
    });

    $scope.message = '';
    $scope.username = '';
    $scope.saveData = function(){
        console.log('save data function');
        $http.post('http://localhost:3000/save/chat/data', {message:$scope.message, username:$scope.username}).
        success(function(result){
            $console.log(result);
        });
    }

});

edited Aug 13, 2015 at 17:24

Grundy

13.4k3 gold badges39 silver badges57 bronze badges

answered Aug 13, 2015 at 17:18

wesww

2,87320 silver badges16 bronze badges

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

5 Comments

NIKHIL RANE Over a year ago

yeah it's working on plunker but in my case it's not working. I'm using a nodejs server is the any dependency.

wesww Over a year ago

in that case, it seems very likely that you still have another javascript error that is breaking execution of your code before you can try to trigger that saveData function. Do you have any console errors? Also, have you tried linting your js to look for syntax problems?

NIKHIL RANE Over a year ago

No there is no console error and no any syntax error.

wesww Over a year ago

Other possibilities would be that a file isn't being included in your build process or a dependency is not being included on request of this page. I can't help much more in a non-speculative way without seeing your whole project directory, since the above solution solves the apparent problem :'(

blurfus Over a year ago

It fails at $console.log('save data function'); because it does not exists - try $log.debug('save data function')... you will need to add the dependency to $log on the line that says function($scope,$http, $log)

blurfus · Accepted Answer · 2015-08-13 18:57:19Z

Angular have different service for print any things in console window of browser. this service name is $log.

$log service has different methods like:

$log.log(string_value)
$log.warn(string_value)
$log.info(string_value)
etc.

So, use it like...

var chat = angular.module('chat', [])

chat.controller('chatCtrl', function($scope,$http, $log){
    $scope.chatResult = null;
    $http.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencsoded";
    $http.get('http://localhost:3000/chat').success(function(result){
        $scope.chatResult = result;
    });

    $scope.message = '';
    $scope.username = '';
    $scope.saveData = function(){
        $log.log('save data function');
        $http.post('http://localhost:3000/save/chat/data', {message:$scope.message, username:$scope.username}).
        success(function(result){
            $log.info(result);
        });
    }
});

Collectives™ on Stack Overflow

angularjs: ng-click not working

2 Answers 2

5 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Related